jQuery UI Library Slider Using the Slide Event


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.