IonDen / Ion.rangeslider

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

• Version: 2.3.1 | Version 3.x is under development now
• Project page and demos
• Download ZIP
• Support the plugin on GitHub sponsors

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. (6 skins included)
• 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:

• ion.rangeSlider.min.css

CDN

Use CDNjs or JSdelivr to get latest version of plugin and jQuery.

<!--Plugin CSS file with desired skin-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>

<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>   

Install with NPM

Use NPM to download latest version of a plugin and install it directly in to your project.

• npm install ion-rangeslider

Install with Bower

Use Bower to download latest version of a plugin and install it directly in to your project.

• bower install ion-rangeslider

Install with Yarn

Use Yarn to download latest version of a plugin and install it directly in to your project.

• yarn add 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();

Experiments playground

Here you can find bunch of advanced JSFIDDLE demos with different, non-standard use cases:

• Custom marks on slider
• 1 handle bind to 1 input
• 2 handles bind to 2 inputs
• 2 sliders connected to each other
• 2 dependant sliders
• 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
• Rendering money value n.nn
• Changing step live
• Toggle slider
• Skip some values
• Values array + prettify

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": 1000,                // MIN value
    "max": 100000,              // MAX values
    "from": 10000,              // FROM value
    "from_percent": 10,         // FROM value in percents
    "from_value": 0,            // FROM index in values array (if used)
    "to": 90000,                // TO value
    "to_percent": 90,           // TO value in percents
    "to_value": 0,              // TO index in values array (if used)
    "min_pretty": "1 000",      // MIN prettified (if used)
    "max_pretty": "100 000",    // MAX prettified (if used)
    "from_pretty": "10 000",    // FROM prettified (if used)
    "to_pretty": "90 000"       // TO prettified (if used)
}

Creating slider (all params)

An example of a customised slider:

$("#example").ionRangeSlider({
    skin: "big",
    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:

• Support the plugin on GitHub sponsors

• Donate direct to my Paypal account: https://www.paypal.me/IonDen