Question

I’m using a jquery ui slider with a play/pause button to control a d3.js animation. When i press the play button, i’d like the slider handle to move along, any way to do that?

Likewise, is there any way to position the slider at a specific step within the slider? I still want the max and min to remain the same but for example, if i want the handle to start at the last step when the page loads instead of the first one.

Answer 1

Use setInterval and stopInterval see there

Lets say you have play button that should invoke under mentioned method and switch to pause mode.

Some example where slider moves each sec and represent hours:

play

var hoursInterval = setInterval(function(){
        var timeOfDay = (localStorage['hour']==23)?0:parseInt(localStorage['hour'])+1;
        $("#playHour").slider("value",timeOfDay);
    },1000);

pause

....
clearInterval(hourInterval);

Suppose it will help you