Elegant Animated Range Slider In Pure JavaScript – Ranger

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>