Small Responsive Range Slider Plugin With JavaScript – rangeSlider.js

Preview:

Description:

rangeSlider.js is a small, fast, ES 5/6 compatible JavaScript plugin for rendering a slim, responsive, event-driven range slider control on the web application.

Install it via NPM:

$ npm install rangeSlider.js

How to use it:

Load the JavaScript rangeSlider.js and stylesheet rangeSlider.css in the document.

<link rel="stylesheet" href="dist/rangeSlider.css">
<script src="dist/rangeSlider.js"></script>

The html structure for the range slider.

<div class="range-slider__container">
  <div id="range-slider__bar" class="range-slider__bar range-slider__bar--style_01"></div>
  <div id="range-slider__handle" class="range-slider__handle range-slider__handle--style_01">
    <div class="range-slider__handle__item"></div>
  </div>
  <div id="range-slider" class="range-slider__handle-area"></div>
</div>

Create a new range slider on the webapge.

var rangeSlider = new RangeSlider( 
    // options here
);

Default options to customize the range slider.

var rangeSlider = new RangeSlider( 
    sliderId: 'range-slider',
    handleId: 'range-slider__handle',
    barId: 'range-slider__bar',
    startPosition: 0,
    scaleDimension: 1,
    handleDefaultPos: -7,
);

Event handling.

var rangeSlider = new RangeSlider( 
    onDrag: null,
    onDragging: null,
    onDragged: null,
    onChanged: null,
    onRefreshed: null,
    onInitialized: null
);