JQuery Slider - Call function after slide

Question

I have a JQuery silder that I'm using to set the score on a web application. I orignally had it so that the user clicked a submit button, but the client now wants it to update AJAX style.

This would work find, but the slide function gets call on every movement, so my AJAX script will send a score before the slider has finished being moved.

Is there a function on the JQuery slider that gets called on release of the slider? Is there a straight forward way for me to check to see when the slider has been released?

Thanks,.

Answer 1

After a quick perusal of the source code, I would say to try using 'stop' or 'change' instead of 'slide.' It seems that the 'stop' event happens on mouseup, and the 'change' event happens on mouseup but only if the value changed. I didn't see any documentation on this, of course, I didn't look very hard.

Answer 2

When initializing the slider, use this:

var slider = $('.slider').slider({ 
    steps: 10,
    handle: $('.knob'),
    animate:'true',
    min:1,
    max:10,
    startValue: 1,
    change: function(e,ui){
        //Do something with ui.value
    } 
});

Answer 3

The documentation confirms what FryGuy just said... From the slider options page:

change Function(Event, ui): Function that gets called on slide stop, but only if the slider position has changed.

stop Function(Event, ui): Function that gets called when the user stops sliding.