Notas importantes

1. get() retorna strings

Usar get(true) para obtener valores numericos:

this.$refs.slider.get();     // → "50.00"
this.$refs.slider.get(true); // → 50

2. Sliders verticales necesitan altura CSS

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

Sin una altura explicita, el slider vertical no se renderiza correctamente.

3. Connect con multiples handles

'lower' y 'upper' solo funcionan con 1 handle. Para 2 o mas handles, usar un array de booleans con longitud = handles + 1:

// 1 handle: string ok
connect: 'lower'

// 2 handles: array de 3
connect: [true, true, false]  // barra antes y entre, no despues

// 3 handles: array de 4
connect: [false, true, true, false]  // barras entre handles

4. reset() solo resetea valores

reset() vuelve a los valores de start, pero no deshace cambios hechos via updateOptions (como cambios de rango o step).

5. v-model emite valores numericos

update:modelValue siempre emite los valores sin formatear, independientemente del format configurado.

6. change no se dispara con .set()

El evento change solo se dispara por interaccion directa del usuario. Al llamar .set() programaticamente, solo se disparan update y set.

7. unconstrained retorna valores en orden original

Cuando los handles se cruzan con behaviour="unconstrained", los valores se retornan en el orden original de los handles, aunque visualmente esten en orden inverso.

8. Step en rangos no lineales

El step global solo aplica al primer segmento. En rangos no lineales, definir step por segmento:

range: {
    min: [0, 10],        // step de 10
    '50%': [500, 100],   // step de 100
    max: 1000
}

9. Pips se renderizan como HTML

Si usas valores de usuario en el formatter de pips, necesitas escapar HTML para prevenir XSS.