Author: | sinnerschrade |
---|---|
Views Total: | 4,369 views |
Official Page: | Go to website |
Last Update: | December 4, 2015 |
License: | MIT |
Preview:

Description:
Ranger is a lightweight, ES6 compatible JavaScript library used for creating an elegant, animated range slider with custom labels and scales.
How to use it:
Load the stylesheet ranger.css in the head section and the JavaScript file ranger.js at the bottom of the document.
<link href="ranger.css" rel="stylesheet"/> <script src="ranger.js" async></script>
Create a range slider with optional settings using data-* attributes as follow.
<div class="Slider js-ranger"> <input data-min="0" data-max="100" data-step="10" value="50" type="hidden" name="amount" autocomplete="off" class="js-ranger-input"> <div class="Slider-track js-ranger-track"> <div class="Slider-distance js-ranger-distance"> <div class="Slider-handle"></div> </div> </div> <output class="Slider-indicator js-ranger-indicator"> <small class="Slider-value js-ranger-value"></small> </output> </div>