Events

Event list

Event	Payload	When it fires
update:modelValue	Number | Array	Every value change (for v-model)
update	{ values, handle, unencoded, tap, positions }	Every value change
start	{ values, handle, unencoded, tap, positions }	When dragging starts
slide	{ values, handle, unencoded, tap, positions }	While dragging a handle
drag	{ values, handle, unencoded, tap, positions }	While dragging the connect
change	{ values, handle, unencoded, tap, positions }	On release (user interaction only)
set	{ values, handle, unencoded, tap, positions }	When a change completes
end	{ values, handle, unencoded, tap, positions }	When a handle is released
hover	Number	On mouse over (requires behaviour with hover)

Standard payload

All events (except hover and update:modelValue) emit an object with:

{
    values: string[],      // Formatted values
    handle: number,        // Handle index (0, 1, 2...)
    unencoded: number[],   // Raw numeric values
    tap: boolean,          // Whether it was caused by a tap
    positions: number[],   // Percentage positions
}

Usage

<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('Drag started, handle:', handle);
        },

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

        onChange({ values, handle, unencoded }) {
            console.log('Changed by user:', unencoded);
        },

        onUpdate({ values, handle, unencoded }) {
            console.log('Any change:', unencoded);
        },

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

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

Hover event

The hover event receives a single numeric value (not the standard object):

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

methods: {
    onHover(value) {
        console.log('Mouse at position:', value);
    }
}

Differences between events

change vs set

• change only fires on direct user interaction (drag and release).
• set fires both on user interaction and programmatic calls (.set()).

v-model emits numbers

update:modelValue always emits raw numeric values, regardless of the configured format.

Register events via ref

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

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