noUiSlider

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

Install from NPM

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

npm install nouislider --save
npm install wnumb --save

Add the noUiSlider js file link.

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

Below the example how to use the package and make it working ApexTree on any page.

HTML

<div class="card-body">
    <div id="tooltipsSlider"></div>
</div>

JavaScript

var tooltipSlider = document.getElementById('tooltipsSlider');
noUiSlider.create(tooltipSlider, {
    start: [20, 80],
    keyboardSupport: true,
    connect: true,
    tooltips: [wNumb({ decimals: 0 }), true],
    range: {
        'min': 0,
        'max': 100
    }
});