Ion.Range Slider 1.8.5

English description | Описание на русском

Easy and light range slider Project page and demos

Download: ion.rangeSlider-1.8.5.zip

---

Description

Ion.RangeSlider — Nice, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings, can be completely altered with CSS.
Slider supports negative and fractional values
Ion.RangeSlider supports touch-devices (iPhone, iPad, etc.).
Ion.RangeSlider freely distributed under MIT licence.

Dependencies

• jQuery 1.9+

Usage

Add the following libraries to the page:

• jQuery
• ion.rangeSlider.min.js

Add the following stylesheets to the page:

• normalize.min.css (If not already present)
• ion.rangeSlider.css

Plus, a skin for the slider. Two skins are included:

• ion.rangeSlider.skinNice.css
• ion.rangeSlider.skinSimple.css

Don't forget about skin image sprite:

• sprite-skin-simple.png - Simple skin
• sprite-skin-nice.png - Nice skin Or use the included PSD file and design a custom skin.

Initialisation

The slider overrides a native text input element. The input may have the default value of "{min};{max}", where {min} and {max} are two numbers.

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

To initialise the slider, call ionRangeSlider on the element:

$("#someID").ionRangeSlider();

Settings

Property	Default	Description
type	"single"	Optional property, will select slider type from two options: single - for single range slider, or double - for double range slider
min	10	Optional property, automatically set from the value attribute of base input. For example: if value="10;100", it will be 10
max	100	Optional property, automatically set from the value attribute of base input. For example: if value="10;100", it will be 100
from	min	Optional property, on default has the same value as min. overwrite default FROM setting
to	max	Optional property, on default has the same value as max. overwrite default TO setting
step	1	Optional property, set slider step value
postfix	-	Optional property, set postfix text to all values. For example: " pounds" will convert "100" in to "100 pounds"
hasGrid	false	Optional property, enables grid at the bottom of the slider (it adds 20px height and this can be customised through CSS)
hideMinMax	false	Optional property, disables Min and Max fields.
hideFromTo	false	Optional property, disables From an To fields.
prettify	true	Optional property, allow to separate large numbers with spaces, eg. 10 000 than 10000
disable	false	Disables the slider

Callbacks

Property	Default	Description
onLoad	-	Triggered once, after slider loaded and each time after slider updated via method Update.
onChange	-	Triggered live as the slider value is changed. Returns object with all slider values
onFinish	-	Triggered once, after slider work is done. Returns object with all slider values

An example of a customised slider:

$("#someID").ionRangeSlider({
    min: 10,                        // min value
    max: 100,                       // max value
    from: 30,                       // overwrite default FROM setting
    to: 80,                         // overwrite default TO setting
    type: "single",                 // slider type
    step: 10,                       // slider step
    postfix: " pounds",             // postfix text
    hasGrid: true,                  // enable grid
    hideMinMax: true,               // hide Min and Max fields
    hideFromTo: true,               // hide From and To fields
    prettify: true,                 // separate large numbers with space, eg. 10 000
    disable: false,                 // disable the slider
    onChange: function(obj){        // function-callback, is called on every change
        console.log(obj);
    },
    onFinish: function(obj){        // function-callback, is called once, after slider finished it's work
        console.log(obj);
    }
});

You can also initialise slider with data-* attributes of input tag:

data-from="30"                      // overwrite default FROM setting
data-to="70"                        // overwrite default TO setting
data-type="double"                  // slider type
data-step="10"                      // slider step
data-postfix=" pounds"              // postfix text
data-hasgrid="true"                 // enable grid
data-hideminmax="true"              // hide Min and Max fields
data-hidefromto="true"              // hide From and To fields
data-prettify="false"               // don't use spaces in large numbers, eg. 10000 than 10 000

Public methods

Slider update, method update:

$("#someID").ionRangeSlider("update", {
    min: 20,                        // change min value
    max: 90,                        // change max value
    from: 40,                       // change default FROM setting
    to: 70,                         // change default TO setting
    step: 5                         // change slider step
});

Slider remove, method remove:

$("#someID").ionRangeSlider("remove");

Update history

• January 12, 2014 - Fixed some bugs and some new features. Issues: # 12, 30, 33, 43, 47, 52, 58
• October 31, 2013 - Fixed bugs: # 13, 31, 35, 37, 40, and some code optimisations
• October 10, 2013 - New Flat UI Skin. Some skin optimisations. Fixed issue #25.
• October 08, 2013 - Fixed issues #20, #21, #23, #24, #26. Removed hideText option. New method and options. Improved code style. Minor optimisations.
• September 11, 2013 - Fixed bug on Android-devices. Added support for negative and fractional values. Issues #15, 16
• August 23, 2013 - Issues #7-10 fixed and some enhancements
• July 29, 2013 - Issue #2 fixed. Versioning changed
• June 30, 2013 - minor bug fixes and new option "hideText"
• June 21, 2013 - added the ability to display the grid
• June 21, 2013 - minor bug fix
• June 06, 2013 - new public methods and some code optimisations
• June 06, 2013 - some small css updates
• April 30, 2013 - new method onFinish
• February 15, 2013 - new feature to set slider settings through data-* attributes of input tag