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

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.

vue template

<template class="card-body">
    <div ref="sliderRef"></div>
</template>

JavaScript

<script setup lang="ts">
import noUiSlider from "nouislider";
import "nouislider/dist/nouislider.css";
import { ref, onMounted, onBeforeUnmount } from "vue";
// Default
const sliderRef = ref<HTMLElement | null>(null);
onMounted(() => {
    if (sliderRef.value) {
        // Create the slider when the component is mounted
        noUiSlider.create(sliderRef.value as any, {
            start: [20, 80],
            connect: true,
            range: {
                min: 0,
                max: 100,
            },
        });
    }
})
onBeforeUnmount(() => {
    // Destroy the slider instance to avoid memory leaks
    if (sliderColorInstance) {
        sliderColorInstance.destroy();
        sliderColorInstance = null;
    }
})