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

Category: Form , Javascript | January 3, 2020
Author:stbaer
Views Total:1,518 views
Official Page:Go to website
Last Update:January 3, 2020
License:MIT

Preview:

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

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

You Might Be Interested In:


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

Leave a Reply