Slider/Input Range Resize Bug

Question

When decreasing the width of a slider control, the slider track and thumb do not also adjust. This can hide the slider thumb outside of the view of the slider control. The slider thumb can also be dragged into the hidden area of the slider control.

If the slider control width is then increased, the slider track and thumb adjust correctly.

The HTML code below can be used in a JavaScript application to demonstrate this behavior:

    <div>
	    The first slider changes the width of the second slider.
        <div>
            <input type="range" min="100" max="500" onchange="document.getElementById('badSlider').style.width = this.value + 'px';" />
        </div>
        <div>
            <input type="range" id="badSlider" min="0" max="100" value="75"/>
        </div>
    </div>

Answer 1

Thanks for Reporting this James!

I checked and there is a bug filed on this that seems to describe this problem.  You should notice this fixed in the next version when it is released.  Double check and let me know after it is released (I do not know when the next version will be released).

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Thanks Jeff. Are there any workarounds for the time being? Maybe by styling the pseudo elements or some way to force a layout update internally?

Thanks,

James

Answer 3

Have you tried to remove and add the element back in using code?

---

Jeff Sanders (MSFT)

Answer 4

I have the same issue, but in XAML markup. Is this the same bug? Will it be fixed in the next release?

Answer 5

Sergey,

This is not a problem in JavaScript now.  If you are having trouble with XAML you can post to the C# or C++ XAML forums.

-Jeff

---

Jeff Sanders (MSFT)