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

!ion.rangeSlider

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.

``html

`

To initialise the slider, call ionRangeSlider on the element:

`javascript
ionRangeSlider('#example_id');
`

Creating slider (all params)

An example of a customised slider:

`javascript
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:

`json
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:

`javascript
// 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();
``

$3

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

$3

but think of me 🤵