2.5.0
Advanced demo
Non-standard ways of using and customising Ion.RangeSlider
Customising Grid
Manipulate the grid using built-in parameters
$("#demo_0").ionRangeSlider({
skin: "big",
min: 0,
max: 10000,
from: 777,
step: 1, // default 1 (set step)
grid: true, // default false (enable grid)
grid_num: 4, // default 4 (number of grid units)
grid_snap: false // default false (snap grid to step)
});
Lock and restrict handles
Lock handles (also called thumbs) to prevent moving
$("#demo_1").ionRangeSlider({
skin: "big",
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({
skin: "big",
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({
skin: "big",
type: "double",
min: 0,
max: 1000,
from: 400,
to: 600,
drag_interval: true,
min_interval: null,
max_interval: null
});
Working with dates
Use prettify to show timestamps as dates, in any locale
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",
force_edges: true,
grid: true,
grid_num: 2,
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
});
New in 2.4.0
Options added in 2.4.0. Each demo below shows one of them on its own.
Prefix only the MIN or MAX label
$("#demo_5").ionRangeSlider({
skin: "big",
type: "double",
min: 0,
max: 100,
from: 20,
to: 80,
min_prefix: "From: ", // prefix shown only on the MIN label
max_prefix: "Up to: " // prefix shown only on the MAX label
});
prettify accepts a global function name too
window.global_prettify_demo = function (n) {
return n + "°";
};
$("#demo_6").ionRangeSlider({
skin: "big",
min: 0,
max: 40,
from: 21,
prettify: "global_prettify_demo" // string names a window function; data-prettify accepts the same string
});
prettify_all_values also prettifies non-numeric entries
function weight_tier_prettify (v) {
return typeof v === "number" ? v + " kg" : v;
}
$("#demo_7").ionRangeSlider({
skin: "big",
grid: true,
values: [1, 5, 10, 25, "Ask for a quote"],
from: 4,
prettify: weight_tier_prettify,
prettify_all_values: true // also run prettify on the non-numeric "Ask for a quote" entry
});
prettify_grid and prettify_min_max format separately
function shrink_to_k (n) {
return (n / 1000) + "k";
}
function label_limit (n) {
return "Limit " + n;
}
$("#demo_8").ionRangeSlider({
skin: "big",
type: "double",
grid: true,
min: 0,
max: 1000000,
from: 250000,
to: 750000,
prettify_grid: shrink_to_k, // formats the grid labels only
prettify_min_max: label_limit // formats the MIN and MAX labels only
});
Read the handle limits from the callback data
function output_limits (data, $output) {
var result = 'from_min: ' + data.from_min + '';
result += 'from_max: ' + data.from_max + '';
result += 'to_min: ' + data.to_min + '';
result += 'to_max: ' + data.to_max + '';
$output.html(result);
}
var $d9 = $("#demo_9");
var $output9 = $(".js-output__d9");
$d9.ionRangeSlider({
skin: "big",
type: "double",
min: 0,
max: 100,
from: 20,
to: 80,
from_min: 10,
from_max: 40,
to_min: 60,
to_max: 90,
onStart: function (data) {
output_limits(data, $output9);
},
onChange: function (data) {
output_limits(data, $output9);
},
onFinish: function (data) {
output_limits(data, $output9);
},
onUpdate: function (data) {
output_limits(data, $output9);
}
});
drag_over_limit on: push the other handle along
$("#demo_10").ionRangeSlider({
skin: "big",
type: "double",
min: 0,
max: 100,
from: 30,
to: 70,
drag_over_limit: true // dragging a handle past its neighbour pushes the neighbour along
});
drag_over_limit off: dragging stops at the neighbour
$("#demo_11").ionRangeSlider({
skin: "big",
type: "double",
min: 0,
max: 100,
from: 30,
to: 70,
drag_over_limit: false // default: dragging a handle stops at its neighbour
});
onInit runs once, right after first render
function output_ready (data, $output) {
$output.html('ready: ' + data.from + ' to ' + data.to);
}
var $d12 = $("#demo_12");
var $output12 = $(".js-output__d12");
$d12.ionRangeSlider({
skin: "big",
type: "double",
min: 0,
max: 100,
from: 30,
to: 70,
onInit: function (data) {
output_ready(data, $output12); // runs once, after first render
}
});
New in 2.5.0
Options added in 2.5.0. Both change how the slider works out its values.
step_from_min: count the steps from min instead of from zero
function output_scale (data, $output) {
$output.html('from: ' + data.from + ' (steps are counted from min: 0.5, 1.5, 2.5 ...)');
}
var $d13 = $("#demo_13");
var $output13 = $(".js-output__d13");
$d13.ionRangeSlider({
skin: "big",
min: 0.5,
max: 10.5,
step: 1,
from: 2.5,
grid: true,
step_from_min: true, // values are 0.5, 1.5, 2.5 ... instead of 1, 2, 3
onStart: function (data) {
output_scale(data, $output13);
},
onChange: function (data) {
output_scale(data, $output13);
}
});
values_raw: keep custom values exactly as given
function output_raw (data, $output) {
$output.html('from_value: ' + data.from_value + ' (' + typeof data.from_value + ')');
}
var $d14 = $("#demo_14");
var $output14 = $(".js-output__d14");
$d14.ionRangeSlider({
skin: "big",
values: ["17.5", "12.2b", "20.0"],
from: 2,
values_raw: true, // "20.0" stays "20.0"; without the option it becomes the number 20
onStart: function (data) {
output_raw(data, $output14);
},
onChange: function (data) {
output_raw(data, $output14);
}
});
Study interactions
Now see how to drive the slider from JavaScript, with its callbacks and public methods.
Interactions demos