Basic usage

Simple slider

Slider simple v-model: 50

The minimum required is v-model and range:

<template>
    <Slider
        v-model="value"
        :range="{ min: 0, max: 100 }"
    />
</template>

<script>
import Slider from 'nouislider-vue3';
import 'nouislider-vue3/css';

export default {
    components: { Slider },
    data() {
        return {
            value: 50,
        }
    }
}
</script>

Range slider (two handles)

Dos handles con connect v-model: [20,80]

To use two handles, pass an array as v-model:

<template>
    <Slider
        v-model="values"
        :range="{ min: 0, max: 100 }"
        :connect="true"
        :tooltips="true"
    />
</template>

<script>
export default {
    data() {
        return {
            values: [20, 80],
        }
    }
}
</script>

The connect: true property adds a colored bar between handles.

Three handles

Tres handles v-model: [20,50,80]

<template>
    <Slider
        v-model="values"
        :range="{ min: 0, max: 100 }"
        :connect="[false, true, true, false]"
        :tooltips="true"
    />
</template>

<script>
export default {
    data() {
        return {
            values: [20, 50, 80],
        }
    }
}
</script>

Connect with multiple handles

When using 2 or more handles, connect must be a boolean array with length = number of handles + 1. Each position indicates whether there's a bar between segments.

• 2 handles: [before, between, after] — 3 positions
• 3 handles: [before, between1, between2, after] — 4 positions

The values 'lower' and 'upper' only work with 1 handle.

Step

Step de 5 v-model: 50

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :step="5"
/>

Vertical orientation

Slider vertical v-model: 50

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    orientation="vertical"
    style="height: 200px"
/>

WARNING

Vertical sliders require an explicit CSS height.

RTL direction

Direccion RTL v-model: 30

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    direction="rtl"
/>

Disabling the slider

Deshabilitar / Habilitar v-model: 50

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :disable="isDisabled"
/>

The start prop

The start prop defines the value that reset() returns to. If not provided, the current modelValue is used.

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :start="50"
/>

Initial value priority

The component determines the initial value in this order:

1. modelValue (v-model)
2. start
3. First value of range (min)