noUiSlider

There are few options on how to noUiSlider into your project.

Install from NPM

Install the noUiSlider Js library using command prompt from the root directory of the project:

npm install nouislider --save

Link the noUiSlider package.

<!-- CSS File -->
<link rel="stylesheet" href="./assets/libs/nouislider/nouislider.min.css">

<!-- JavaScript File -->
<script src="assets/libs/nouislider/nouislider.min.js"></script>
<script src="assets/libs/wnumb/wNumb.min.js"></script>

Check the below example how to use and make it working noUiSlider on any page.

HTML

<div id="slider" class="w-100"></div>

JavaScript

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});