Events

Binding events

You can attach event handlers to the slider using jQuery functions such as bind() or on().

// For earlier versions if jQuery, but still supported
$("#slider").bind("valuesChanging", function(e, data){
  console.log("Something moved. min: " + data.values.min + " max: " + data.values.max);
});

// Preferred method
$("#slider").on("valuesChanging", function(e, data){
  console.log("Something moved. min: " + data.values.min + " max: " + data.values.max);
});

// Possible use, if sliders are constructed/destroyed many times
$(document).on("valuesChanging", ".ui-rangeSlider", function(e, data){
  console.log("Something moved. min: " + data.values.min + " max: " + data.values.max);
});

Values changing

Use the event valuesChanging if you want to intercept events while the user is moving an element in the slider.

$("#slider").bind("valuesChanging", function(e, data){
  console.log("Something moved. min: " + data.values.min + " max: " + data.values.max);
});

Values changed

Use the event valuesChanged when you want to intercept events once values are chosen. This event is only triggered once after a move.

$("#slider").bind("valuesChanged", function(e, data){
  console.log("Values just changed. min: " + data.values.min + " max: " + data.values.max);
});

User values changed

Like the valuesChanged event, the userValuesChanged is fired after values finished changing. But, unlike the previous one, userValuesChanged is only fired after the user interacted with the slider. Not when you changed values programmatically.

// This event will be fired
$("#slider").bind("valuesChanged", function(e, data){
  console.log("Will be executed");
});

// This event will not ne fired
$("#slider").bind("userValuesChanged", function(e, data){
  console.log("Will NOT be executed");
});

// Changing values programmatically
$("#slider").rangeSlider("values", 10, 20);