JavaScript API

Full description of range slider settings, methods and callbacks

Option	Defaults	Type	Description
Basic setup
type data-type	"single"	string	Choose slider type, could be `single` - for one handle, or `double` for two handles
min data-min	10	number	Set slider minimum value
max data-max	100	number	Set slider maximum value
from data-from	min	number	Set start position for left handle (or for single handle)
to data-to	max	number	Set start position for right handle
Advanced setup
step data-step	1	number	Set sliders step. Always > 0. Could be fractional.
values data-values	[]	array	Set up your own array of possible slider values. They could be numbers or strings. If the values array is set up, `min`, `max` and `step` param, are no longer can be changed.
keyboard data-keyboard	true	boolean	Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
Grid setup
grid data-grid	false	boolean	Enables grid of values.
grid_margin data-grid-margin	true	boolean	Set left and right grid borders.
grid_num data-grid-num	4	number	Number of grid units.
grid_snap data-grid-snap	false	boolean	Snap grid to sliders step (`step` param). If activated, `grid_num` will not be used.
Interval control
drag_interval data-drag-interval	false	boolean	Allow user to drag whole range. Only in `double` type
drag_over_limit data-drag-over-limit	false	boolean	Let a dragged handle push the other handle instead of stopping at it. Works with mouse and touch drag, respects min_interval, max_interval, from_fixed and to_fixed. Only in `double` type
min_interval data-min-interval	—	number	Set minimum diapason between sliders. Only in `double` type
max_interval data-max-interval	—	number	Set maximum diapason between sliders. Only in `double` type
Handles control
from_fixed data-from-fixed	false	boolean	Fix position of left (or single) handle.
from_min data-from-min	min	number	Set minimum limit for left handle.
from_max data-from-max	max	number	Set the maximum limit for left handle
from_shadow data-from-shadow	false	boolean	Highlight the limits for left handle
to_fixed data-to-fixed	false	boolean	Fix position of right handle.
to_min data-to-min	min	number	Set the minimum limit for right handle
to_max data-to-max	max	number	Set the maximum limit for right handle
to_shadow data-to-shadow	false	boolean	Highlight the limits for right handle
UI control
skin data-skin	"flat"	string	Choose UI skin to use
hide_min_max data-hide-min-max	false	boolean	Hides `min` and `max` labels
hide_from_to data-hide-from-to	false	boolean	Hide `from` and `to` labels
force_edges data-force-edges	false	boolean	Slider will be always inside it's container.
extra_classes data-extra-classes	—	string	Traverse extra CSS-classes to slider container
block data-block	false	boolean	Locks slider and makes it inactive (visually). `input` is NOT disabled. Can still be send with forms.
Prettify numbers
prettify_enabled data-prettify-enabled	true	boolean	Improve readability of long numbers. 10000000 → 10 000 000
prettify_separator data-prettify-separator	" "	string	Set up your own separator for long numbers. 10 000, 10.000, 10-000 etc.
prettify data-prettify	null	function, string	Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates. Can also be a string with the name of a global function.
prettify_grid data-prettify-grid	null	function, string	Set up your own prettify function for grid tick labels only. Falls back to `prettify`, then to default formatting. Not used in `values` mode.
prettify_min_max data-prettify-min-max	null	function, string	Set up your own prettify function for the min and max labels only. Falls back to `prettify`, then to default formatting. Not used in `values` mode.
prettify_all_values data-prettify-all-values	false	boolean	In `values` mode, also run `prettify` on non-numeric entries.
prefix data-prefix	—	string	Set prefix for values. Will be set up right before the number: $100
min_prefix data-min-prefix	—	string	Special prefix, used only for the minimum value. Will be shown before the min label. For example: From: 0 — 100
max_prefix data-max-prefix	—	string	Special prefix, used only for the maximum value. Will be shown before the max label. For example: 0 — Up to: 100
postfix data-postfix	—	string	Set postfix for values. Will be set up right after the number: 100k
max_postfix data-max-postfix	—	string	Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+
decorate_both data-decorate-both	true	boolean	Used for "double" type and only if prefix or postfix was set up. Determine how to decorate close values. For example: $10k — $100k or $10 — 100k
values_separator data-values-separator	" — "	string	Set your own separator for close values. Used for `double` type. Default: 10 — 100. Or you may set: 10 to 100, 10 + 100, 10 → 100 etc.
Data control
input_values_separator ^{data-input-values-separator}	" ; "	string	Separator for double values in `input` value property. Default FROM;TO. Only for `double` type
disable data-disable	false	boolean	Locks slider and makes it inactive. `input` is disabled too. Invisible to forms.
Callbacks
scope —	null	object	Scope for callbacks. Pass any `object`. Callback will be executed like this: `onChange.call(scope);`
onStart —	null	function	Callback. Is called on slider start.
onChange —	null	function	Callback. IS called on each values change.
onFinish —	null	function	Callback. Is called than user releases handle.
onUpdate —	null	function	Callback. Is called than slider is modified by external methods `update` or `reset`.
onInit —	null	function	Callback. Is called once, right after the first render. For a slider that starts hidden, wait until it becomes visible before touching the DOM.

Public methods


    // 1. Initialise range slider instance
    $(".js-range-slider").ionRangeSlider();
    
    // 2. Save instance to variable
    let my_range = $(".js-range-slider").data("ionRangeSlider");
    
    // 3. Update range slider content (this will change handles positions)
    my_range.update({
        from: 300,
        to: 400
    });
    
    // 4. Reset range slider to initial values
    my_range.reset();
    
    // 5. Destroy instance of range slider
    my_range.destroy();

Demos

Time to see some range sliders in action!

Demo

Basic setup Advanced setup Grid setup Interval control Handles control UI control Prettify numbers Data control Callbacks Public methods