English description | Описание на русском
Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options.
- Version: 2.1.7 | Version 3.x is under development now
- Project page and demos
- Download ZIP
- Ion.RangeSlider — cool, comfortable, responsive 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 your 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 its 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 pastes all its 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
- npm 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 in web development and you are not sure how to correctly install the plugin to your web-page, please download this demo example
Here you can find bunch of advanced JSFIDDLE demos with different, non-standart use cases:
- Reverse or RTL
- 1 handle bind to 1 input
- 2 handles bind to 2 inputs
- 2 sliders connected to each other
- 1st slider disables/enables 2nd slider
- Non-linear slider
- Plus and Minus buttons
- Calculating sum
- Adding one more diapazon on 1 slider
- Live editing of Min and Max values
- Prettify and transform values at the same time
- Custom marks on slider
- Rendering money value n.nn
- Rendering Dates with Moment.js
- Changing step live
- Toggle slider
- Using different skin color at the same time
- 2 dependant sliders
- Skip some values
- Good Prettify example
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 (left or single handle)
"from_percent": 10, // FROM value in percents
"from_value": 0, // FROM index in values array (if used)
"to": 900, // TO value (right handle in double type)
"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.
-
Donate through Pledgie service:
-
Donate direct to my Paypal account: https://www.paypal.me/IonDen
-
Donate direct to my Yandex.Money account: http://yasobe.ru/na/razrabotku
