Search code examples
jqueryjquery-ui-slider

How to enable some time delay to trigger JQuery Slider function?

I implemented a slider in my jsp page and the code is as this,

$('#slider1').slider({
    range: "min",
    value: myvalue,
    min: 0,
    max: 57,
    slide: function(event, ui) {
    /*
        my backend function go here
    */
    }
});

I want to add a "mouse up time" so that after user click the slider and then pause for certain seconds, the slide function will then be triggered. I don't want the function to be triggered immediately after user release button. This makes sure that user is paused to see the function happens.

Thanks

Mike

Solution

  • You can use a setTimeout to introduce a delay. See jsfiddle.

    // ...
slide: function(event, ui) {
  setTimeout(function() { sliderMethod(event, ui); }, 2000); // delay trigger for 2s
}
//..
function sliderMethod(event, ui) {
  /*
    my backend function go here
  */
}