Question

I am using the jQuery UISlider. I have it set up so that upon the execution of the event “slidestop” (ie when the user stops sliding), some code will determine if it is higher or lower than a given value in the range of the slider. The code then determines which of a given set of values the slider is closest to, and then attempts to move the slider handle to that point. All that is essentially working fine. here’s my dilema:

The handle does not animate to the new location, rather is jumps there. I am using this line of code to move the handle:

$("#navScroller").slider('value', newScrollerValue);

where newScrollerValue is the value the logic decided the handle needed to be sent to.

If I use the same line of code in a click event binded to an element on the page, (but giving it a test value for newScrollerValue), the handle animates to the new location as it should. But placing it within the callback method for the slidestop event makes it jumps to the new location rather than animate smoothly.

I hope that explains it clearly enough. Any thoughts on what I could do to achieve a smooth handle animation to a programatically assigned value within the slidestop event?

Answer 1

The animation might be disabled internally during the time the handle is being dragged, see if you can perform the action in a new context after the event fires:

$("#navScroller").bind("slidestop", function (event, ui) {
   setTimeout(function () {
     //perform the required logic here
     $("#navScroller").slider('value', newScrollerValue);
   },10);
});