Instalación

Instalaremos el componentes utilizando NPM.

npm install --save nouislider-vue3

Ahora importamos y registramos el componente.

import "nouislider-vue3/css";
import VSlider from "nouislider-vue3";

Global

Registro del componente de forma global.

import { createApp } from "vue";
import App from "./App.vue";

import VSlider from "nouislider-vue3";
import "nouislider-vue3/css";

const app = createApp(App);

app.component("v-slider", VSlider);

app.mount("#app");

Local

Registro y uso del componente en un archivo .vue

<template>
    <div>
        <p>Valor: {{value}}</p>
        <v-slider
            v-model="value"
            :start="configs.start"
            :step="configs.step"
            :connect="configs.connect"
            :range="configs.range"
        ></v-slider>
    </div>
</template>
<script setup>
    import "nouislider-vue3/css";
    import VSlider from "nouislider-vue3";

    export default {
        components: {
            VSlider,
        },

        data() {
            return {
                value: 1,
                configs: {
                    start: 1,
                    step: 1,
                    connect: "lower",
                    range: {
                        min: 1,
                        max: 10,
                    },
                },
            }
        },
    }
</script>

Navegador

Registro y uso del componente en un archivo .html

Aclaración

Tenga en cuenta que cuando utilice unpkg para importar el componente, el nombre global de este será noUiSliderVue.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/nouislider-vue3@latest/dist/nouislider-vue3.css">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/nouislider-vue3"></script>

<div id="app">
    <p>Valor: {{value}}</p>
    <v-slider
        v-model="value"
        :start="configs.start"
        :step="configs.step"
        :connect="configs.connect"
        :range="configs.range"
    ></v-slider>
</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                value: 1,
                configs: {
                    start: 1,
                    step: 1,
                    connect: "lower",
                    range: {
                        min: 1,
                        max: 10,
                    },
                }
            }
        },
    })
    .component('v-slider', noUiSliderVue)
    .mount('#app');
</script>