Beautiful Custom Range Slider With JS – Range.js

Preview:

Description:

Range.js is a lightweight vanilla JavaScript library to create slim, custom range sliders from regular text fields.

With support for increment/decrement buttons and decimal/positive/negative values.

How to use it:

Place the JavaScript file range.js right before the closing body tag.

<script src="src/range.js"></script>

Create a normal text field and specify the initial/min/max values and step size using the native input attributes.

<input type="text" id="example" value="5" max="100" min="0" step="1">

Initialize the library to create a default range slider.

const el = document.getElementById( 'example' );
rangejs( el ,{
  css: true
} );

Enable/disable the increment/decrement buttons.

const el = document.getElementById( 'example' );
rangejs( el, {
  css: true,
  buttons: true
});