Flexible and Touch-Friendly jQuery Range Slider Plugin - Ion.RangeSlider

Ion Range Slider is a jQuery plugin that turns the standard html input elements into flexible, skinnable, customizable and mobile friendly range sliders. Ion.RangeSlider also supports events and methods, and can be fully customized through CSS and javascript.

Related plugins:

• Simple Range Input Slider Plugin - slideControl
• Lightweight and Customisable Range Slider Plugin -  noUiSlider
• Powerful Range Slider Plugin - jQRangeSlider

How to use it:

1. Include jQuery library and jQuery Ion.RangeSlider on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/ion.rangeSlider.min.js"></script>

2. Include required CSS files on the page

<link href="css/normalize.min.css" rel="stylesheet" type="text/css">
<link href="css/ion.rangeSlider.css" rel="stylesheet" type="text/css">

3. Choose and include a theme CSS

<link href="css/ion.rangeSlider.skinNice.css" rel="stylesheet" type="text/css">

4. Create a input field

<input type="text" id="demo" name="rangeName" value="10;100" />

5. Call the plugin with default options

$("#demo").ionRangeSlider({
// min value
min: 10,

// max value
max: 100,   

// overwrite default FROM setting
from: 30,   

// overwrite default TO setting
to: 80, 

// Choose slider type, 
// could be single - for one handle, or double four two handles
type: "single", 

// slider step
step: 10,  

// Set minimum diapason between sliders.
min_interval: 0,

// Set maximum diapason between sliders.
max_interval: 0,

// Allow user to drag whole range.
drag_interval: false,

// Set up your own array of possible slider values. 
values: [],

p_values: [],

// Fix position of left (or single) handle.
from_fixed: false, 

// Set minimum limit for left handle.
from_min: null, 

// Set the maximum limit for left handle
from_max: null, 

// Highlight the limits for left handle
from_shadow: false, 

// Fix position of right handle.
to_fixed: false, 

// Set the minimum limit for right handle
to_min: null, 

// Set the maximum limit for right handle
to_max: null, 

// Highlight the limits for right handle
to_shadow: false, 

// Improve readability of long numbers.
prettify_enabled: true, 

// Set up your own separator for long numbers.
prettify_separator: " ", 

// Set up your own prettify function. Can be anything.
prettify: null, 

// Slider will be always inside it's container.
force_edges: false, 

// Activates keyboard controls. 
keyboard: false, 

// Movement step, than controling from keyboard. In percents.
keyboard_step: 5, 

// Enables grid of values.
grid: false, 

// Set left and right grid borders.
grid_margin: true, 

// Number of grid units.
grid_num: 4, 

// Snap grid to sliders step (step param).
grid_snap: false, 

// Hides min and max labels
hide_min_max: false, 

// Hide from and to lables
hide_from_to: false, 

// prefix value
prefix: "$",

// postfix value
postfix: " €",  

// Special postfix, used only for maximum value
max_postfix: "",

// Used for "double" type and only if prefix or postfix was set up.
decorate_both: true, 

// Set your own separator for close values. 
values_separator: " — ", 

// disable slider
disable: false, 

// called on slider start.
onStart: null, 

// called on each values change.
onChange: null, 

// called than user releases handle.
onFinish: null, 

// called than slider is modified by external methods update or reset
onUpdate: null 

});

6. Public methods.

// UPDATE - updates slider to any new values
slider.update({
    from: 300,
    to: 400
});

// RESET - reset slider to it's first values
slider.reset();

// DESTROY - destroys slider and restores original input field
slider.destroy();

Changelog:

v2.3.1 (2019-12-20)

• Minor bugfixes

v2.3.0 (2018-12-12)

• fix: only require jQuery if it is not defined

v2.2.0 (2017-06-21)

• Slider has TabIndex support now. 
• keyboard_step option removed as confusing.
• keyboard controls are enabled by default now
• keyboard movement is bind to step now
• Traverse extra class names to container. 
• Prettified values added to result object. 
• It is possible to pass scope for callbacks now.
• New option block. Light version of disabled but sliders value can be send with form. 

v2.1.8 (2017-06-19)

• Bugs fixed.

v2.1.7 (2017-03-26)

• Bugs fixed.

v2.1.6 (2016-12-27)

• Fixed bugs.

v2.1.5 (2016-12-12)

• Fixed bugs.

v2.1.4 (2016-04-27)

• Fixed bugs.

v2.1.3 (2016-04-10)

• Fixed bugs.

v2.1.2 (2015-10-13)

• Fixed bugs.

v2.1.1 (2015-09-21)

• Fixed bugs.

v2.1.0 (2015-09-21)

• Fixed bugs.
• New features. 
• Some code refactoring
• Code documentation updated

v2.0.13 (2015-07-26)

• Fixed bugs.

v2.0.12 (2015-07-10)

• Fixed rounding bug.

v2.0.11 (2015-07-02)

• Fixed rounding bug.

v2.0.10 (2015-06-06)

• Fixed rounding bug.

v2.0.9 (2015-05-31)

• Fixed critical bug. 

v2.0.8 (2015-05-30)

• Fixed some bugs.

v2.0.7 (2015-05-27)

• Fixed memory / cpu issues

v2.0.6 (2015-02-18)

• Fixed bug with broken From and To

v2.0.5 (2015-02-13)

• update

v2.0.4 (2015-02-12)

• update

v2.0.3 (2014-12-29)

• Issues fixed.

v2.0.2 (2014-12-02)

• Issues fixed.
• API update.

v2.0.1 (2014-11-16)

• Some bugs fixed and few new methods.

v2.0.0 (2014-11-09)

• All params (except functions) are lowercase now: param_name, not paramName
• Same param names was changed: hasGrid → grid, onLoad → onStart
• Callbacks data object format was changed. Example: fromNumber → from
• Slider now writes it's result to value attribute and also to data-from and data-to attributes

v1.9.3 (2014-08-07)

• Bower support added

v1.9.2 (2014-08-04)

•  New param gridMargin. 
•  Resolved some issues.

v1.9.1 (2014-04-15)

• bugs fixed.

v1.9.0 (2014-03-17)

• New plugin description. New demos design. Some new slider params.

v1.8.5 (2014-01-13)

• Fixed some bugs and some new features.

v1.8.2 (2013-10-31)

• Some code optimisations
• Bugs fixed.

v1.8.1 (2013-10-11)

• New Flat UI Skin.
• Some skin optimisations. 
• Bug fixed.

v1.8.0 (2013-10-08)

• Fixed bugs.
• Removed hideText option.
• New method and options.
• Improved code style. Minor optimisations

---

This awesome jQuery plugin is developed by IonDen. For more Advanced Usages, please check the demo page or visit the official website.