Rangeslider

Easy to use, flexible and responsive range slider with skin support. Read the Official IonRangeSlider Documentation for 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 array var 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