Ion.Range Slider 1.6.3

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

Easy and light range slider Project page and demos

Download: ion.rangeSlider-1.6.3.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.
Ion.RangeSlider supports touch-devices (iPhone, iPad, etc.).
Ion.RangeSlider freely distributed under MIT licence.

Dependencies

• jQuery 1.9+

Using script

Import this libraries:

• jQuery
• ion.rangeSlider.min.js

And CSS:

• normalize.min.css - desirable if you have not yet connected one
• ion.rangeSlider.css
• ion.rangeSlider.skinName.css

Don't forget about skin image:

• sprite-skin-simple.png - Simple skin
• sprite-skin-nice.png - Nice skin
• Or use included PSD file and draw your own skin (don't forget to modify skin css after that)

Create base input element:

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

Initialize slider:

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

Or initialize slider with custom settings:

$("#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
    hideText: true,                 // hide all text data
    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 initialize 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-hidetext="true"                // hide all text data

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");

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)
hideText	false	Optional property, disables all visual text data.
onChange	-	Function-callback, is called on every change, returns object with all slider values
onFinish	-	Function-callback, is called once, then slider work is done. Returns object with all slider values

Update history

• 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