Nouislider

noUiSlider is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works great in responsive designs.

Official Documentation

Usage

CSS

In order to use this plugin on your page you will need to include the following styles in the Page CSS area from the page’s head section.

<link rel="stylesheet" type="text/css" href="../assets/nouislider/nouislider.css">

JS

In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer.

<script src="../assets/nouislider/nouislider.min.js"></script>
<script src="../assets/nouislider/wNumb.js"></script>

Nouislider

 <div id="slider-padding"></div>