The slider provides an event called slide
that will trigger whenever the mouse moves during a slider handle drag. This function holds a reference to the slide event
and a reference to the slider ui
object. The ui
object holds a jQuery object for the handle being moved and the value(s) of the slider.
Single-Handle Slider:
var value;
$( "#slider" ).slider({
slide: function(event, ui) {
value = ui.value;
}
});
Range Slider:
var lowValue;
var highValue;
$( "#range-slider" ).slider({
range: true,
slide: function(event, ui) {
lowValue = ui.values[0];
highValue = ui.values[1];
}
});
Note: The slide
event is intended to respond to active mouse motion and will not trigger if the slider values are changed programmatically. To react to these events, use the change
event.