Author: | stbaer |
---|---|
Views Total: | 5,907 views |
Official Page: | Go to website |
Last Update: | January 3, 2020 |
License: | MIT |
Preview:

Description:
A tiny JavaScript plugin that converts the normal range input into a pretty clean, fully responsive, and touch-friendly range slider.
How to use it:
1. Install & download.
# NPM $ npm install rangeslider-js --save
2. Import the rangeslider-js as an ES module.
import rangesliderJs from 'rangeslider-js'
3. Or import the necessary JavaScript and CSS files from the dist
folder.
<link rel="stylesheet" href="dist/styles.min.css" /> <script src="dist/rangeslider-js.min.js"></script>
4. Call the plugin on the regular range input and done.
<input id="slider" type="range" min="0" max="10" value="5" step="1">
var mySlider = document.getElementById('slider'); rangesliderJs.create(mySlider);
5. You can also define the values of the input attributes in the JavaScript as follows:
rangesliderJs.create(mySlider, { min: 0, max: 10, value: 5, step: 1 });
6. Update the range value programmatically.
mySlider.update({ value: 7 });
7. Callback functions.
rangesliderJs.create(mySlider, { onInit: (value, percent, position) => {}, onSlideStart: (value, percent, position) => {}, onSlide: (value, percent, position) => {}, onSlideEnd: (value, percent, position) => {} });
How to install it in wordpress? Can I have the steps?