Props
Props requeridos
| Prop | Tipo | Descripcion |
|---|---|---|
modelValue (v-model) | Number | Array | String | Valor(es) del slider |
range | Object | Rango min/max. Ej: { min: 0, max: 100 } |
Props de noUiSlider
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
start | Number | Array | String | — | Valor al que vuelve reset(). Si no se pasa, usa modelValue |
connect | Boolean | Array | String | false | Barra entre handles. true, 'lower', 'upper' (1 handle) o array de booleans |
step | Number | — | Incremento entre valores |
snap | Boolean | — | Fuerza salto entre valores del range |
margin | Number | — | Distancia minima entre handles |
limit | Number | — | Distancia maxima entre handles |
padding | Number | Array | 0 | Distancia minima desde bordes. [10, 15] para asimetrico |
orientation | String | 'horizontal' | 'horizontal' o 'vertical' |
direction | String | 'ltr' | 'ltr' o 'rtl' |
tooltips | Boolean | Object | Array | Function | false | Tooltips sobre handles |
animate | Boolean | false | Transicion al hacer tap o .set() |
animationDuration | Number | 300 | Duracion de animacion en ms |
behaviour | String | 'tap' | Keywords separados por guion. Ver opciones |
format | Object | — | { to: fn, from: fn } para formatear valores |
pips | Object | null | Configuracion de marcas. Ver pips |
handleAttributes | Array | — | Atributos HTML por handle |
ariaFormat | Object | — | Formatter para atributos aria |
keyboardSupport | Boolean | true | Soporte de flechas |
keyboardDefaultStep | Number | 10 | Step por defecto para teclado |
keyboardMultiplier | Number | 1 | Multiplicador para flechas |
keyboardPageMultiplier | Number | 5 | Multiplicador para Page Up/Down |
cssPrefix | String | — | Prefijo CSS personalizado |
cssClasses | Object | — | Override de clases CSS |
disable | Boolean | false | Deshabilita el slider |
Props del wrapper
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
id | String | auto-generado | ID del elemento del slider |
pipsys | Boolean | false | Atajo para pips con mode: 'steps' |
clickablePips | Boolean | false | Click en pips mueve el handle mas cercano |
tooltipOnClick | Boolean | false | Tooltips solo al interactuar con el handle |
mergeTooltips | Object | null | { threshold, separator } para fusionar tooltips cercanos |
TIP
Todos los props son reactivos. Podes cambiar cualquier prop en tiempo de ejecucion y el slider se actualiza automaticamente.