vanilla-rangeslider

Vanilla Javascript 💅

• Download ZIP
• Project page and demos
• Support the plugin originator on GitHub sponsors

Description

• Removed the jQuery requirement from the original ion.rangeSlider (Version: 2.3.1)
• Removed IE8 Support (if this is a big deal, let me know)
• Additional/Original skins can be found in the css here
• For full documentation visit the original ion.rangeSlider as everything will work the same except the initializers (see the documentation below).

Dependencies

• None 🤯

Usage

Add the following libraries to the page:

• rangeSlider.min.js

Add the following stylesheets to the page:

• rangeslider.min.css

Install with NPM

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

• npm install vanilla-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:

ionRangeSlider('#example_id');

Creating slider (all params)

An example of a customised slider:

ionRangeSlider('#example_id', {
    min: 0,
    max: 5000,
    prefix: "$",
    grid: true,
    grid_num: 5,
    step: 100,
});

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:

// Store slider into a variable
const myRangeSlider = ionRangeSlider('#example_id', {
    type: "double",
    min: 0,
    max: 1000,
    from: 200,
    to: 500,
    grid: true
});
 
// UPDATE - updates slider to any new values
myRangeSlider.update({
    from: 300,
    to: 400
});
 
// RESET - reset slider to it's inital values
myRangeSlider.reset();
 
// DESTROY - destroys slider and restores original input field
myRangeSlider.destroy();

Support Ion-series plugins development

• Support the plugin on GitHub sponsors
• Donate direct to my Paypal account: https://www.paypal.me/IonDen

☝️Support the originator

but think of me 🤵