Advanced demo
Non standard ways of using and customising Ion.RangeSlider
Customising Grid
Manipulate the grid using build in parameters
$("#demo_0").ionRangeSlider({
min: 0,
max: 10000,
from: 777,
step: 1, // default 1 (set step)
grid: true, // default false (enable grid)
grid_num: 4, // default 4 (set number of grid cells)
grid_snap: false // default false (snap grid to step)
});
Lock and restrict handles
Lock handles to prevent moving
$("#demo_1").ionRangeSlider({
type: "double",
min: 0,
max: 10,
from: 2,
to: 8,
grid: true,
grid_snap: true,
from_fixed: false, // fix position of FROM handle
to_fixed: false // fix position of TO handle
});
Limit movement of a handle
$("#demo_2").ionRangeSlider({
type: "single",
min: 0,
max: 1000,
from: 500,
grid: true,
from_min: 250, // set min position for FROM handle (replace FROM to TO to change handle)
from_max: 750, // set max position for FROM handle
from_shadow: true // highlight restriction for FROM handle
});
Manipulating interval
Restrict interval size and/or drag it
$("#demo_3").ionRangeSlider({
type: "double",
min: 0,
max: 1000,
from: 400,
to: 600,
drag_interval: true,
min_interval: null,
max_interval: null
});
Working with dates
Restrict interval size and/or drag it
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: 'long',
day: 'numeric'
});
}
$("#demo_4").ionRangeSlider({
skin: "big",
type: "double",
grid: true,
min: dateToTS(new Date(year, 10, 1)),
max: dateToTS(new Date(year, 11, 1)),
from: dateToTS(new Date(year, 10, 8)),
to: dateToTS(new Date(year, 10, 23)),
prettify: tsToDate
});
Study interactions
After basic setup is done - time to go deeper. Learn how to setup you own range slider configuration.
Interactions demos