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

Category: Form , Javascript | January 3, 2020
Views Total:5,907 views
Official Page:Go to website
Last Update:January 3, 2020


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


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 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');

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.

  value: 7

7. Callback functions.

rangesliderJs.create(mySlider, {
  onInit: (value, percent, position) => {},
  onSlideStart: (value, percent, position) => {},
  onSlide: (value, percent, position) => {},
  onSlideEnd: (value, percent, position) => {}

You Might Be Interested In:

One thought on “Clean Mobile-friendly Range Slider In JavaScript – rangeslider-js

Leave a Reply