jQuery Ion RangeSlider

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

Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options.

• Version: 2.1.6 | Version 3.x is under developement now
• Project page and demos
• Download ZIP

Description

• 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:

Key features

• 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

Demos

• Basic demo
• Advanced demo
• Interactions demo

Dependencies

• jQuery 1.8.x+

Usage

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.

Install with bower

• bower install ionrangeslider

Install with npm

• npm install ion-rangeslider

Initialisation

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

Demo for juniors

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

Migrating from 1.x to 2.x

• 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

Experiments playground

Settings

Description of data passed to callbacks (onChange and etc.)

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)
}

Creating slider (all params)

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"

Public methods

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

One more look on demos

• Basic demo
• Advanced demo
• Interactions demo

All plugins options are covered in demos.

Update history

Support Ion-series plugins development:

• 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