How to remove the default animation for input element with type range


  • Hi gurus,

    If we programmtically adjust the value of a range element(i.e. slider.value = 100;), there is always a transition to the specified target position.

    The animation also happens if we try to resize the range element, which causes the thumb to be partially hidden for a short time.

    Now my customer feels like removing the animation.

    Could you tell me how to acheive this?

    I've tried setting transition-property: none for -ms-thumb and -ms-fill-lower, but it doesn't help.

    A thousand thanks.

    • Edited by noobrocks Wednesday, June 27, 2012 12:12 PM
    Tuesday, June 26, 2012 7:57 AM


All replies

  • No one can answer?

    I think there should be some way to disable the default animation for this kind of element.

    By the way, similar behavior also occurs for <progress> element.

    If we programmatically update the value of it, the progress is not immediately updated.

    There is always a short duration for the -ms-fill to move to the target position.

    • Edited by noobrocks Wednesday, June 27, 2012 12:31 PM
    Wednesday, June 27, 2012 12:31 PM
  • You cannot disable the animation.

    Jeff Sanders (MSFT)

    Thursday, June 28, 2012 7:04 PM