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