Eventos

Listado de eventos

Evento	Payload	Cuando se dispara
update:modelValue	Number | Array	Cada cambio de valor (para v-model)
update	{ values, handle, unencoded, tap, positions }	Cada cambio de valor
start	{ values, handle, unencoded, tap, positions }	Al comenzar a arrastrar
slide	{ values, handle, unencoded, tap, positions }	Mientras se arrastra un handle
drag	{ values, handle, unencoded, tap, positions }	Mientras se arrastra el connect
change	{ values, handle, unencoded, tap, positions }	Al soltar (solo interaccion de usuario)
set	{ values, handle, unencoded, tap, positions }	Al terminar un cambio
end	{ values, handle, unencoded, tap, positions }	Al soltar un handle
hover	Number	Al pasar el mouse (requiere behaviour con hover)

Payload estandar

Todos los eventos (excepto hover y update:modelValue) emiten un objeto con:

{
    values: string[],      // Valores formateados
    handle: number,        // Indice del handle (0, 1, 2...)
    unencoded: number[],   // Valores numericos crudos
    tap: boolean,          // Si fue causado por un tap
    positions: number[],   // Posiciones porcentuales
}

Uso

<template>
    <Slider
        v-model="value"
        :range="{ min: 0, max: 100 }"
        @start="onStart"
        @slide="onSlide"
        @change="onChange"
        @update="onUpdate"
        @set="onSet"
        @end="onEnd"
    />
</template>

<script>
export default {
    methods: {
        onStart({ values, handle, unencoded }) {
            console.log('Inicio arrastre, handle:', handle);
        },

        onSlide({ values, handle, unencoded }) {
            console.log('Arrastrando:', unencoded);
        },

        onChange({ values, handle, unencoded }) {
            console.log('Cambio por usuario:', unencoded);
        },

        onUpdate({ values, handle, unencoded }) {
            console.log('Cualquier cambio:', unencoded);
        },

        onSet({ values, handle, unencoded }) {
            console.log('Set completo:', unencoded);
        },

        onEnd({ values, handle, unencoded }) {
            console.log('Fin arrastre, handle:', handle);
        },
    }
}
</script>

Evento hover

El evento hover recibe un unico valor numerico (no el objeto estandar):

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    behaviour="hover"
    @hover="onHover"
/>

methods: {
    onHover(value) {
        console.log('Mouse en posicion:', value);
    }
}

Diferencias entre eventos

change vs set

• change solo se dispara por interaccion directa del usuario (arrastrar y soltar).
• set se dispara tanto por interaccion del usuario como por llamadas programaticas (.set()).

v-model emite numeros

update:modelValue siempre emite valores numericos crudos, independientemente del format configurado.

Registrar eventos via ref

// Registrar
this.$refs.slider.on('slide', (values, handle, unencoded) => {
    // callback directo de noUiSlider
});

// Remover
this.$refs.slider.off('slide');