locked
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>

    Tuesday, February 07, 2012 9:42 PM

Answers

  • 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)

    Wednesday, February 08, 2012 3:23 PM
    Moderator
  • 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)

    Monday, May 14, 2012 3:32 PM
    Moderator

All replies

  • 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)

    Wednesday, February 08, 2012 3:23 PM
    Moderator
  • 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

    Wednesday, February 08, 2012 5:22 PM
  • Have you tried to remove and add the element back in using code?

    Jeff Sanders (MSFT)

    Wednesday, February 08, 2012 6:28 PM
    Moderator
  • I have the same issue, but in XAML markup. Is this the same bug? Will it be fixed in the next release?
    Monday, May 14, 2012 11:51 AM
  • 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)

    Monday, May 14, 2012 3:32 PM
    Moderator