Methods

Executing methods

Methods on sliders (as all jQuery UI widgets) have to be called in a special way. See examples below.

Basic slider

// Use the slider method to call methods
// First argument: method name
// Next arguments: method arguments
$("#slider").rangeSlider("values", 10, 20);

Edit slider

// Use the slider method to call methods
// First argument: method name
// Next arguments: method arguments
$("#slider").editRangeSlider("values", 10, 20);

Date slider

// Use the slider method to call methods
// First argument: method name
// Next arguments: method arguments
$("#slider").dateRangeSlider("values", new Date(2012, 0, 1), new Date(2012, 0, 31));

Bounds

The method bounds([min, max]) gets or sets the bounds. You can get and change bounds with this method or with the bounds option.

bounds() accepts zero or two arguments. If both arguments are provided, then this method initializes slider's bounds to given values. In both cases, it returns bounds values.

Get values

// Basic slider
var basicSliderBounds = $("#slider").rangeSlider("bounds");
console.log(basicSliderBounds.min + " " + basicSliderBounds.max);

// Edit slider
var editSliderBounds = $("#editSlider").editRangeSlider("bounds");
console.log(editSliderBounds.min + " " + editSliderBounds.max);

// Date slider
var dateSliderBounds = $("#dateSlider").dateRangeSlider("bounds");
console.log(dateSliderBounds.min.toString() + " " + dateSliderBounds.max.toString());

Set values

// Basic slider
$("#slider").rangeSlider("bounds", 10, 20);

// Edit slider
$("#editSlider").editRangeSlider("bounds", 20, 100);

// Date slider
$("#dateSlider").dateRangeSlider("bounds", new Date(2012, 0, 1), new Date(2012, 0, 31));

Destroy

The method destroy() allows you to remove a slider from your page. It releases memory and removes all DOM elements added by the slider constructor.

Enable / disable

The methods enable and disable lets you enable or disable a slider. When a slider is diabled, user can't modify its values.

Min / max

Methods min([value]) and max([value]) can be used to get or set minimum/maximum selected value in the slider.

Both methods accept one optional argument. When used, this value is set as a new minimum/maximum value for the selected range. This methods always return new value for the minimum/maximum value of selected range.

Get values

// Basic slider
var basicSliderMin = $("#slider").rangeSlider("min");
console.log(basicSliderMin);

// Edit slider
var editSliderMin = $("#editSlider").editRangeSlider("min");
console.log(editSliderMin);

// Date slider
var dateSliderMax = $("#dateSlider").dateRangeSlider("max");
console.log(dateSliderMax.toString());

Set values

// Basic slider
$("#slider").rangeSlider("min", 10);

// Edit slider
$("#editSlider").editRangeSlider("min", 20);

// Date slider
$("#dateSlider").dateRangeSlider("max", new Date(2012, 1, 1));

Resize

The method resize() can be used to update slider size after a change in parent's size. This method is automatically called on window resize.

// Parent is hidden when instanciating this slider
$("#hiddenSlider").rangeSlider();
$("#magicButton").click(function(){
  $('#hiddenParent').show();
  
  // Calling this method forces the slider to update itself
  // and display correctly
  $('#hiddenSlider').rangeSlider('resize');
  
  $(this).detach();
  return false;
});

Scroll left/right

Methods scrollLeft(pixels) and scrollRight(pixels) allow you to simulate click on slider arrows. You can adjust speed by increasing/decreasing the amount.

$("#scrolledSlider").rangeSlider();

$("#scrollLeft").click(function(){
  $('#hiddenSlider').rangeSlider('scrollLeft', 10);
  return false;
});

$("#scrollRight").click(function(){
  $('#hiddenSlider').rangeSlider('scrollRight', 10);
  return false;
});

Values

The method values([min, max]) can be used for getting current selected values, and setting new values.

Get values

// Basic slider
var basicValues = $("#slider").rangeSlider("values");
console.log(basicValues.min + " " + basicValues.max);

// Edit slider
var editValues = $("#editSlider").editRangeSlider("values");
console.log(editValues.min + " " + editValues.max);

// Date slider
var dateValues = $("#dateSlider").dateRangeSlider("values");
console.log(dateValues.min.toString() + " " + dateValues.max.toString());

Set values

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

// Edit slider
$("#editSlider").editRangeSlider("values", 20, 100);

// Date slider
$("#dateSlider").dateRangeSlider("values", new Date(2012, 0, 1), new Date(2012, 0, 31));

Zoom in/out

Methods zoomIn(speed) and zoomOut(speed) allow you to enlarge/reduce selected range in the slider.

// Basic slider
$("#slider").rangeSlider("zoomIn", 10);

// Edit slider
$("#editSlider").editRangeSlider("zoomIn", 27);

// Date slider
$("#dateSlider").dateRangeSlider("zoomOut", 42);