Rangeslider

Easy to use, flexible and responsive range slider with skin support. Read the Official IonRangeSlider Documentationfor a full list of instructions and other options.

Basic Example

Set min value, max value and start point

$("#range1").ionRangeSlider({  min: 100,  max: 1000,  from: 550});

Range and Step

Set up range with negative values

$("#range2").ionRangeSlider({  type: 'double',  grid: true,  min: -1000,  max: 1000,  from: -500,  to: 500});

Custom Values

Set up you own numbers. It could be array or even strings.

var custom_values = [0, 10, 100, 1000, 10000, 100000, 1000000];// be careful! FROM and TO should be index of values arrayvar my_from = custom_values.indexOf(10);var my_to = custom_values.indexOf(10000);$('#range3').ionRangeSlider({  type: "double",  grid: true,  from: my_from,  to: my_to,  values: custom_values});

Lock and Restrict

Lock or restrict handles or interval to prevent or limit movement. The example below is only the from handler are allowed to move.

$("#range4").ionRangeSlider({  type: "double",  min: 0,  max: 10,  from: 2,  to: 8,  grid: true,  grid_snap: true,  from_fixed: false,  to_fixed: true});

Working with Dates

Make a range slider using dates.

var lang = 'en-US';var year = 2018;function dateToTS (date) {  return date.valueOf();}function tsToDate (ts) {  var d = new Date(ts);  return d.toLocaleDateString(lang, {    year: 'numeric',    month: 'short',    day: 'numeric'    }  );}$("#range5").ionRangeSlider({  type: "double",  grid: true,  min: dateToTS(new Date(year, 10, 1)),  max: dateToTS(new Date(year, 10, 20)),  from: dateToTS(new Date(year, 10, 5)),  to: dateToTS(new Date(year, 10, 15)),  prettify: tsToDate});

Skins

Check out the different look and feel of the range slider.

skin: "round"

skin: "square"

Components