noUiSlider

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

Install from yarn

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

yarn add nouislider --save

Import the noUiSlider package.

import noUiSlider from 'nouislider';
import 'nouislider/dist/nouislider.css';

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

HTML

<div class="card-body">
    <div id="defaultSlider" bind:this={defaultSlider}></div>
</div>

JavaScript

let defaultSlider;
onMount(() => {
    // Default Example Slider
    noUiSlider.create(defaultSlider, {
        start: [20, 80],
        connect: true,
        range: {
            min: 0,
            max: 100
        }
    });
});