English description | Описание на русском
Easy and light range slider
- 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.
- With this plugin you will be able to build beautiful range sliders, like this:
- Skin support. (5 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 set custom step and snap grid to step
- Support of custom values diapason
- Customisable grid of values
- 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 or 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, reset and remove) to control it after creation
- For advanced users slider has callbacks (onStart, onChange, onFinish, onUpdate). Slider paste all it's params to callback first argument as object
- Slider supports date and time
Add the following libraries to the page:
- jQuery
- ion.rangeSlider.min.js
Add the following stylesheets to the page:
- normalize.css (optional)
- ion.rangeSlider.css
Plus, a skin for the slider. 5 skins are included. Choose one:
- ion.rangeSlider.skinFlat.css + sprite-skin-flat.png
- ion.rangeSlider.skinHTML5.css + no images
- ion.rangeSlider.skinModern.css + sprite-skin-modern.png
- ion.rangeSlider.skinNice.css + sprite-skin-nice.png
- ion.rangeSlider.skinSimple.css + sprite-skin-simple.png
Or use the included PSD file and design a custom skin.
- bower install ionrangeslider
- spm install ion-rangeslider
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();If your are new person in web development and you are not sure how to correctly install the plugin to your web-page, please download this demo example
- 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
<tr>
<td>min<div><sup>data-min</sup></div></td>
<td>10</td>
<td>number</td>
<td>Set slider minimum value</td>
</tr>
<tr>
<td>max<div><sup>data-max</sup></div></td>
<td>100</td>
<td>number</td>
<td>Set slider maximum value</td>
</tr>
<tr>
<td>from<div><sup>data-from</sup></div></td>
<td>min</td>
<td>number</td>
<td>Set start position for left handle (or for single handle)</td>
</tr>
<tr>
<td>to<div><sup>data-to</sup></div></td>
<td>max</td>
<td>number</td>
<td>Set start position for right handle</td>
</tr>
<tr class="options__step">
<td>step<div><sup>data-step</sup></div></td>
<td>1</td>
<td>number</td>
<td>Set sliders step. Always > 0. Could be fractional.</td>
</tr>
<tr>
<td>min_interval<div><sup>data-min-interval</sup></div></td>
<td>—</td>
<td>number</td>
<td>Set minimum diapason between sliders. Only in "double" type</td>
</tr>
<tr class="options__step">
<td>max_interval<div><sup>data-max-interval</sup></div></td>
<td>—</td>
<td>number</td>
<td>Set maximum diapason between sliders. Only in "double" type</td>
</tr>
<tr class="options__step">
<td>drag_interval<div><sup>data-drag-interval</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Allow user to drag whole range. Only in "double" type (beta)</td>
</tr>
<tr class="options__step">
<td>values<div><sup>data-values</sup></div></td>
<td>[]</td>
<td>array</td>
<td>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.</td>
</tr>
<tr class="options__new">
<td>from_fixed<div><sup>data-from-fixed</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Fix position of left (or single) handle.</td>
</tr>
<tr class="options__new">
<td>from_min<div><sup>data-from-min</sup></div></td>
<td>min</td>
<td>number</td>
<td>Set minimum limit for left handle.</td>
</tr>
<tr class="options__new">
<td>from_max<div><sup>data-from-max</sup></div></td>
<td>max</td>
<td>number</td>
<td>Set the maximum limit for left handle</td>
</tr>
<tr class="options__new">
<td>from_shadow<div><sup>data-from-shadow</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Highlight the limits for left handle</td>
</tr>
<tr class="options__new">
<td>to_fixed<div><sup>data-to-fixed</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Fix position of right handle.</td>
</tr>
<tr class="options__new">
<td>to_min<div><sup>data-to-min</sup></div></td>
<td>min</td>
<td>number</td>
<td>Set the minimum limit for right handle</td>
</tr>
<tr class="options__new">
<td>to_max<div><sup>data-to-max</sup></div></td>
<td>max</td>
<td>number</td>
<td>Set the maximum limit for right handle</td>
</tr>
<tr class="options__new options__step">
<td>to_shadow<div><sup>data-to-shadow</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Highlight the limits for right handle</td>
</tr>
<tr>
<td>prettify_enabled<div><sup>data-prettify-enabled</sup></div></td>
<td>true</td>
<td>boolean</td>
<td>Improve readability of long numbers. 10000000 → 10 000 000</td>
</tr>
<tr class="options__new">
<td>prettify_separator<div><sup>data-prettify-separator</sup></div></td>
<td>" "</td>
<td>string</td>
<td>Set up your own separator for long numbers. 10 000, 10.000, 10-000 и т.п.</td>
</tr>
<tr class="options__new options__step">
<td>prettify<div><sup>—</sup></div></td>
<td>null</td>
<td>function</td>
<td>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.</td>
</tr>
<tr class="options__new options__step">
<td>force_edges<div><sup>data-force-edges</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Slider will be always inside it's container.</td>
</tr>
<tr class="options__new">
<td>keyboard<div><sup>data-keyboard</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.</td>
</tr>
<tr class="options__new options__step">
<td>keyboard_step<div><sup>data-keyboard-step</sup></div></td>
<td>5</td>
<td>number</td>
<td>Movement step, than controling from keyboard. In percents.</td>
</tr>
<tr>
<td>grid<div><sup>data-grid</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Enables grid of values.</td>
</tr>
<tr>
<td>grid_margin<div><sup>data-grid-margin</sup></div></td>
<td>true</td>
<td>boolean</td>
<td>Set left and right grid borders.</td>
</tr>
<tr class="options__new">
<td>grid_num<div><sup>data-grid-num</sup></div></td>
<td>4</td>
<td>number</td>
<td>Number of grid units.</td>
</tr>
<tr class="options__new options__step">
<td>grid_snap<div><sup>data-grid-snap</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Snap grid to sliders step (step param). If activated, grid_num will not be used.</td>
</tr>
<tr>
<td>hide_min_max<div><sup>data-hide-min-max</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Hides min and max labels</td>
</tr>
<tr class="options__step">
<td>hide_from_to<div><sup>data-hide-from-to</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Hide from and to lables</td>
</tr>
<tr>
<td>prefix<div><sup>data-prefix</sup></div></td>
<td>—</td>
<td>string</td>
<td>Set prefix for values. Will be set up right before the number: $100</td>
</tr>
<tr>
<td>postfix<div><sup>data-postfix</sup></div></td>
<td>—</td>
<td>string</td>
<td>Set postfix for values. Will be set up right after the number: 100k</td>
</tr>
<tr>
<td>max_postfix<div><sup>data-max-postfix</sup></div></td>
<td>—</td>
<td>string</td>
<td>Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+</td>
</tr>
<tr class="options__new">
<td>decorate_both<div><sup>data-decorate-both</sup></div></td>
<td>true</td>
<td>boolean</td>
<td>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</td>
</tr>
<tr class="options__new options__step">
<td>values_separator<div><sup>data-values-separator</sup></div></td>
<td>" — "</td>
<td>string</td>
<td>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.</td>
</tr>
<tr class="options__step">
<td>disable<div><sup>data-disable</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Locks slider and makes it inactive.</td>
</tr>
<tr>
<td>onStart<div><sup>—</sup></div></td>
<td>null</td>
<td>function</td>
<td>Callback. Is called on slider start.</td>
</tr>
<tr>
<td>onChange<div><sup>—</sup></div></td>
<td>null</td>
<td>function</td>
<td>Callback. IS called on each values change.</td>
</tr>
<tr>
<td>onFinish<div><sup>—</sup></div></td>
<td>null</td>
<td>function</td>
<td>Callback. Is called than user releases handle.</td>
</tr>
<tr class="options__new">
<td>onUpdate<div><sup>—</sup></div></td>
<td>null</td>
<td>function</td>
<td>Callback. Is called than slider is modified by external methods <code>update</code> or <code>reset</code>.</td>
</tr>
</tbody>
| Option | Defaults | Type | Description |
|---|---|---|---|
| type data-type |
"single" | string | Choose slider type, could be single - for one handle, or double four two handles |
Result is object type and passed to callback as first argument:
Obj: {
"input": object, // jQuery-link to input
"slider": object, // jQuery-link to sliders container
"min": 0, // MIN value
"max": 1000, // MAX values
"from": 100, // FROM value
"from_percent": 10, // FROM value in percents
"from_value": 0, // FROM index in values array (if used)
"to": 900, // TO value
"to_percent": 90, // TO value in percents
"to_value": 0 // TO index in values array (if used)
}An example of a customised slider:
$("#example").ionRangeSlider({
min: 0,
max: 10000,
from: 1000,
to: 9000,
type: 'double',
prefix: "$",
grid: true,
grid_num: 10
});You can also initialise slider with data-* attributes of input tag:
data-min="0"
data-max="10000"
data-from="1000"
data-to="9000"
data-type="double"
data-prefix="$"
data-grid="true"
data-grid-num="10"To use public methods, at first you must save slider instance to variable:
// Launch plugin
$("#range").ionRangeSlider({
type: "double",
min: 0,
max: 1000,
from: 200,
to: 500,
grid: true
});
// Saving it's instance to var
var slider = $("#range").data("ionRangeSlider");
// Fire public method
slider.reset();There are 3 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();All plugins options are covered in demos.
- 2.0.3: December 29, 2014 - Issues fixed: #160, #165, #166, #168, #170
- 2.0.2: December 02, 2014 - Issues fixed: #143, #148, #153, #155, #159. API update.
- 2.0.1: November 15, 2014 - Some bugs fixed and few new methods.
- 2.0.0: November 08, 2014 - New API, lot's of bug fixes and improvements.
- 1.9.3: August 06, 2014 - Bower support added
- 1.9.2: August 04, 2014 - New param gridMargin. Resolved some issues: #89, #94, #96, #97, #98, #103
- 1.9.1: 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