CODEWITHSUNDEEP
jqueryuser-interfacesliderjquery-animate
chAd
chAd

Reputation: 13

jQuery UI Slider reset animation

Trying to create a slider that will slide back to the beginning if it isn't dragged all the way across... here is what doesn't work:

$("#slider").slider({
    animate: true,
    change: function(event, ui) {
        if ($(this).slider('value') < 100) {
            $(this).slider('value', 0);
        }
    }   
});

The slider moves back, but instantly, no animation.

Upvotes: 1

Views: 1000

Answers (2)

Chris Abrams
Chris Abrams

Reputation: 42440

Here you go:

$("#slider").slider({
    animate: true,
    stop: function(event, ui) {
        if(ui.value < 100) {
            setTimeout(function() {
                $("#slider").slider("value", 0);
            }, 100);
        }
    }   
});

This fiddle shows an example too: http://jsfiddle.net/chrisabrams/2xkvy/1/

Upvotes: 1

Tim
Tim

Reputation: 320

In jquery ui 1.8.18 you will have to call it asynchronously:

$("#slider").slider({
   animate: true,
   stop: function(event, ui) {
     if($(this).slider('value') < 100) {
      setTimeout(function(){
         $("#slider").slider('value', 0);
      },1);
    }
  }   
});

Upvotes: 1

Related Questions