jQuery UI Library Slider Setting Values and the Change Event

Example

The slider provides an event called change that will trigger after the mouse completes a slider handle drag or if the value(s) have been changed programmatically. 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.

One example could be having to display new information after a slider's values have been updated by another element's event. Let's use a select element for demonstration where the value of the slider is programmatically set in when the value of the select changes:

HTML

<select id="setting">
  <option value="1">Low</option>
  <option value="2">Medium</option>
  <option value="3">High</option>
</select>

<div id="slider"></div>

<div id="display-value"></div>

JavaScript

$(function() {
  $( "#slider" ).slider({
    min: 0,
    max: 11,
    // This will trigger when the value is programmatically changed
    change: function(event, ui) {
        $( "#display-value" ).text(ui.value);
    }
  });
  
  $( "#setting" ).change(function () {
    switch ($(this).val()) {
      case "1":
        $( "#slider" ).slider( "value", 3 );  // Sets the value of a slider programmatically
        break;
      case "2":
        $( "#slider" ).slider( "value", 7 );  // Sets the value of a slider programmatically
        break;
      case "3":
        $( "#slider" ).slider( "value", 11 ); // Sets the value of a slider programmatically
        break;
    }
  });
});

Note: It's in these circumstances that the slide event would not trigger and the change event is needed. However, if elements need to react to the slider values changing as the handle is being dragged, the slide event will be necessary.