Author: | Masanori-Iwata |
---|---|
Views Total: | 1,197 views |
Official Page: | Go to website |
Last Update: | April 6, 2017 |
License: | MIT |
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 );