1

I was wondering if there is any way to set the slider bar plays automatically like for example, when I click the play button, the slider bar and the value will increase automatically. Here is my slider bar: JSFiddle

Basically what I wanted is I clicked on the play button, then the slider bar and its value will increase automatically and stops for few seconds at each value before increment.

Through my research, I know there is a method called setInterval() will repeat certain event automatically but I not sure how to implement it.

And this is my Fiddle after I added the auto play function but my slider bar is not coming out.

Improve this question
3
  • Hi, haven't seen the solution yet but your second fiddle has errors. Line# 35: replace with $('#btnPlay').on('click',function(){, (here you did not called btnPlay correctly as it requires # for calling by id) then the line ends with a . that is not required. Then you are trying to set values setValue with a : in between while it should be , (a comma). This will make your slider show. Commented Jan 10, 2015 at 9:22
  • @Cyberpks Would you mind to provide me the answer in jsfiddle? Commented Jan 10, 2015 at 9:33
  • See here, jsfiddle.net/0twk5L7y/11 . I have corrected the second fiddle. I am not sure but does this help you? Commented Jan 10, 2015 at 9:33

2 Answers 2

Reset to default
1

[UPDATED ANSWER]

Here is your final solution (I hope), Fiddle

Basically you were using step method for incrementing the time, but step is called when slider is moved by mouse. You should use the change method to update the time value.

$("#slider-range").slider({       
    min: 0,
    max: 1380,
    step: stepOne,
    animate: "slow",
    change: function(e,ui)
    {
        var hours = Math.floor(ui.value / 60);
        var minutes = ui.value - (hours * 60);

        if(hours.length == 1) hours = '0' + hours;
        if(minutes.length == 1) minutes = '0' + minutes;
        if(minutes==0)minutes = '00';

        // Convert 24 hours format into 12
        if(hours == 0){
            hours = 12;
            ext = "AM";
        }
        if(hours == 12){
            ext = "PM";
        }
        if(hours > 12){
            hours = hours - 12;
            ext = 'PM';
        }

        $('#sliderValue').html(hours+':'+minutes + ext);
    }
});
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

But then let's say I wanted to pause it after I clicked the play. Am I able to pause it?
See this jsfiddle.net/0twk5L7y/14 you can just check a boolean value for it.
I see. So you are doing like if it's not paused, then you execute the loop. If it is paused, it will go out the loop. Thanks a lot!
0

http://jsfiddle.net/0twk5L7y/10/

$('#btnPlay').on('click', function(){
    // call a recursive function here...
});

You can change your logic inside the function. But normally I use a front-end framework such as Ember or Angular that helps you achieve what you want to do easily.

Improve this answer

7 Comments

Can you help me take a look at the second fiddle? I've added the codes and its causing the slider bar not appearing
setValue(0:00) will cause the error. I think javascript don't understand 0:00 (it's not a string nor a number)
So do you have any ideas how to fix that based on that jsfiddle?
my guess is in your fiddle you set max: 1380, so I just calculate the value for each time and setTimeout those values to move the bar.
oops. I just realized I did not save the fiddle for you.. one sec
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.