English description | Описание на русском
Easy and light range slider Project page and demos
Download: ion.rangeSlider-1.9.1.zip
- Ion.RangeSlider — cool, comfortable and easily customizable range slider
- Supports events and public methods, has flexible settings, can be completely altered with CSS
- Cross-browser: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
- Ion.RangeSlider supports touch-devices (iPhone, iPad, Nexus, etc.).
- Ion.RangeSlider freely distributed under terms of MIT licence.
- Skin support. (3 skins included and PSD for skin creation)
- Any number of sliders at one page without conflicts and big performance problems
- Two slider types single (1 slider) and double (2 sliders)
- Support of negative and fractional values
- Ability to edit step
- Support of custom values diapason (See months example)
- Automatically generated grid
- Ability to disable UI elements (min and max, current value, grid)
- Postfixes and prefixes for you numbers ($20, 20 € etc.)
- Additional postfix for maximum value (eg. $0 — $100+)
- Ability to prettify large numbers (eg. 10000000 -> 10 000 000)
- Slider writes it's value right into input value field. This makes it easy to use in any html form
- Any slider value can be set through input data-attribute (eg. data-min="10")
- Slider supports disable param. You can set it true to make slider inactive
- Slider supports external methods (update and remove) to control it after creation
- For advanced users slider has callbacks (onLoad, onChange, onFinish). Slider paste all it's params to callback first argument as object
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.
The slider overrides a native text input element.
<input type="text" id="example_id" name="example_name" value="" />To initialise the slider, call ionRangeSlider on the element:
$("#example_id").ionRangeSlider();| 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 |
| prefix | - | Optional property, set prefix text to all values. For example: "$" will convert "100" in to "$100" |
| postfix | - | Optional property, set postfix text to all values. For example: " €" will convert "100" in to "100 €" |
| maxPostfix | - | Optional property, set postfix text to maximum value. For example: maxPostfix - "+" will convert "100" to "100+" |
| 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 |
| values | null | Array of custom values: [a, b, c] etc. |
| 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 |
Each callback have object with slider data as a first argument:
Obj: {
"input": object, // jQuery-link to input
"slider": object, // jQuery-link to slider container
"min": 10, // MIN value
"max": 20, // MAX value
"fromNumber": 10, // FROM value
"toNumber": 20, // TO value
"fromPers": 25, // FROM value in percents
"toPers": 75, // TO value in percents
"fromX": 100, // x-coordinate of FROM-slider in pixels
"toX": 200 // x-coordinate of TO-slider in pixels
}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
prefix: "$", // prefix value
postfix: " €", // postfix value
maxPostfix: "+", // postfix to maximum value
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 slider
values: ["a", "b", "c"], // array of custom values
onLoad: function (obj) { // callback is called after slider load and update
console.log(obj);
},
onChange: function (obj) { // callback is called on every slider change
console.log(obj);
},
onFinish: function (obj) { // callback is called on slider action is finished
console.log(obj);
}
});You can also initialise slider with data-* attributes of input tag:
data-from="30" // default FROM setting
data-to="70" // default TO setting
data-type="double" // slider type
data-step="10" // slider step
data-prefix="$" // prefix value
data-postfix=" €" // postfix value
data-maxpostfix="+" // postfix to maximum value
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
data-values="a,b,c" // comma separated predefined slider valuesSlider 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");- April 15, 2014 - Fixed some bugs: #81, #82, #85
- March 16, 2014 - New plugin description. New demos design. Some new slider params. Issues: #65, #68, #70, #77, #78
- 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, #8, #9, #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