vanilla-rangeslider
v1.0.0
Published
Ion-RangeSlider without out jQuery
Downloads
1,641
Maintainers
Readme
Vanilla Javascript 💅
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 🤵