Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery Slider - Call function after slide

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,.

like image 787
Ryan Smith Avatar asked Jan 13 '09 00:01

Ryan Smith


3 Answers

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
    } 
});
like image 154
Salty Avatar answered Oct 23 '22 15:10

Salty


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.

like image 22
FryGuy Avatar answered Oct 23 '22 15:10

FryGuy


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.

like image 31
Stobor Avatar answered Oct 23 '22 14:10

Stobor