Uso basico

Slider simple

Slider simple v-model: 50

El minimo requerido es v-model y 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>

Slider con rango (dos handles)

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

Para usar dos handles, pasa un array como 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>

La propiedad connect: true agrega una barra de color entre los handles.

Tres 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 con multiples handles

Cuando usas 2 o mas handles, connect debe ser un array de booleans con longitud = cantidad de handles + 1. Cada posicion indica si hay barra entre los segmentos.

• 2 handles: [antes, entre, despues] → 3 posiciones
• 3 handles: [antes, entre1, entre2, despues] → 4 posiciones

Los valores 'lower' y 'upper' solo funcionan con 1 handle.

Step

Step de 5 v-model: 50

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

Orientacion vertical

Slider vertical v-model: 50

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

WARNING

Los sliders verticales requieren una altura CSS explicita.

Direccion RTL

Direccion RTL v-model: 30

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

Deshabilitar el slider

Deshabilitar / Habilitar v-model: 50

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

Prop start

La prop start define los valores iniciales del slider para el metodo reset(). Si no se pasa, modelValue se usa como valor inicial.

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

Prioridad de valores iniciales

El componente determina el valor inicial en este orden:

1. modelValue (v-model)
2. start
3. Primer valor de range (min)