noUiSlider Vue

Appearance

Eventos ​

Eventos basicos ​

Eventos admitidos: update, change, set, slide y drag. Estos eventos se pueden usar simultáneamente. También existen los eventos start y end, que se activan cuando se inicia o termina un arrastre.

Los eventos siempre se activan en el siguiente orden:

start > slide > drag > update > change > set > end

Todos los eventos responden objetos similares

Respuesta de los eventos ​

La mayoria de los eventos responden el mismo tipo de objeto.

json
{
    "values": [
        0
    ],
    "handle": 0,
    "unencoded": [
        0
    ],
    "tap": true,
    "positions": [
        0
    ]
}

Ejemplo de funcionamiento ​

Valor:

Valor:

start
slide
drag
update
update:model-value
change
set
end
Ver código de ejemplo
html
<template>
    <p>Valor: {{configs.values && configs.values[0]}}</p>
    <p>Valor: {{configs.values && configs.values[1]}}</p>

    <div class="events-bar">
        <span class="event-tag">
            <span class="z-0">start</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.start, 'opacity-0': !configs.events.start}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">slide</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.slide, 'opacity-0': !configs.events.slide}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">drag</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.drag, 'opacity-0': !configs.events.drag}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">update</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.update, 'opacity-0': !configs.events.update}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">update:model-value</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.updateModelValue, 'opacity-0': !configs.events.updateModelValue}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">change</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.change, 'opacity-0': !configs.events.change}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">set</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.set, 'opacity-0': !configs.events.set}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">end</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.end, 'opacity-0': !configs.events.end}"></div>
        </span>
    </div>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :step="configs.step"
        :behaviour="configs.behaviour"
        :connect="configs.connect"
        :range="configs.range"
        @update:model-value="() => activeEvent('updateModelValue')"
        @start="v => activeEvent('start')"
        @slide="v => activeEvent('slide')"
        @drag="v => activeEvent('drag')"
        @update="v => activeEvent('update')"
        @change="v => activeEvent('change')"
        @set="v => activeEvent('set')"
        @end="v => activeEvent('end')"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const activeEvent = (eventName) => {
        if (configs.events[eventName]) {
            return;
        }

        configs.events[eventName] = true;

        setTimeout(() => {
            configs.events[eventName] = false;
        }, 500);
    };

    const configs = reactive({
        values: null,
        start: [5, 15],
        behaviour: 'drag',
        connect: true,
        range: {
            'min': 1,
            'max': 20
        },
        events: {
            start: false,
            slide: false,
            drag: false,
            update: false,
            change: false,
            set: false,
            updateModelValue: false,
            end: false,
        },
    });
</script>
<style>
    .events-bar {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }

    .event-tag {
        border: 1px solid #f3f4f6;
        border-radius: 0.25rem;
        padding: 0.25rem;
        position: relative;
        color: #000;
    }

    .event-tag .z-0 {
        position: relative;
        z-index: 0;
    }

    .event-tag__bg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 0.25rem;
        background-color: #e5e7eb; /* Tailwind: bg-gray-200 */
        z-index: -10;
        transition: opacity 0.5s;
    }

    .opacity-100 {
        opacity: 1;
    }

    .opacity-0 {
        opacity: 0;
    }
</style>

Eventos adicionales ​

Evento hover ​

Detalles del evento

Respuesta del evento ​

La respuesta de este evento es un valor numerico.

Ejemplo de funcionamiento ​

Valor:

Valor:

Valor de hover: 0

start
slide
drag
update
update:model-value
change
set
end
hover
Ver código de ejemplo
html
<template>
    <p>Valor: {{configs.values && configs.values[0]}}</p>
    <p>Valor: {{configs.values && configs.values[1]}}</p>
    <p>Valor de <b>hover</b>: {{configs.hoverValue}}</p>

    <div class="events-bar">
        <span class="event-tag">
            <span class="z-0">start</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.start, 'opacity-0': !configs.events.start}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">slide</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.slide, 'opacity-0': !configs.events.slide}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">drag</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.drag, 'opacity-0': !configs.events.drag}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">update</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.update, 'opacity-0': !configs.events.update}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">update:model-value</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.updateModelValue, 'opacity-0': !configs.events.updateModelValue}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">change</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.change, 'opacity-0': !configs.events.change}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">set</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.set, 'opacity-0': !configs.events.set}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">end</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.end, 'opacity-0': !configs.events.end}"></div>
        </span>
        <span class="event-tag">
            <span class="z-0">hover</span>
            <div class="event-tag__bg" :class="{'opacity-100': configs.events.hover, 'opacity-0': !configs.events.hover}"></div>
        </span>
    </div>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :step="configs.step"
        :behaviour="configs.behaviour"
        :connect="configs.connect"
        :range="configs.range"
        @update:model-value="() => activeEvent('updateModelValue')"
        @start="v => activeEvent('start')"
        @slide="v => activeEvent('slide')"
        @drag="v => activeEvent('drag')"
        @update="v => activeEvent('update')"
        @change="v => activeEvent('change')"
        @set="v => activeEvent('set')"
        @end="v => activeEvent('end')"
        @hover="v => {configs.hoverValue = v; activeEvent('hover');}"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const activeEvent = (eventName) => {
        if (configs.events[eventName]) {
            return;
        }

        configs.events[eventName] = true;

        setTimeout(() => {
            configs.events[eventName] = false;
        }, 500);
    };

    const configs = reactive({
        values: null,
        start: [5, 15],
        connect: true,
        hoverValue: 0,
        behaviour: 'drag-hover-snap',
        range: {
            'min': 1,
            'max': 20
        },
        events: {
            start: false,
            slide: false,
            drag: false,
            update: false,
            change: false,
            set: false,
            updateModelValue: false,
            hover: false,
            end: false,
        },
    });
</script>
<style>
    .events-bar {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }

    .event-tag {
        border: 1px solid #f3f4f6;
        border-radius: 0.25rem;
        padding: 0.25rem;
        position: relative;
        color: #000;
    }

    .event-tag .z-0 {
        position: relative;
        z-index: 0;
    }

    .event-tag__bg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 0.25rem;
        background-color: #e5e7eb; /* Tailwind: bg-gray-200 */
        z-index: -10;
        transition: opacity 0.5s;
    }

    .opacity-100 {
        opacity: 1;
    }

    .opacity-0 {
        opacity: 0;
    }
</style>