Clean Mobile-friendly Range Slider In JavaScript – rangeslider-js

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) => {}
});