Configuracion avanzada

Margin y Limit

Margin: 10, Limit: 50 v-model: [30,60]

Margin

Distancia minima entre handles:

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

Los handles no podran acercarse a menos de 10 unidades entre si.

WARNING

No compatible con behaviour="unconstrained".

Limit

Distancia maxima entre handles (opuesto a margin):

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

Los handles no podran alejarse mas de 50 unidades entre si.

WARNING

No compatible con behaviour="unconstrained".

Padding

Padding asimetrico: [10, 20] v-model: 50

Distancia minima desde los bordes del rango:

<!-- Simetrico -->
<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :padding="10"
/>

<!-- Asimetrico -->
<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :padding="[10, 20]"
/>

Snap

Snap con rango no lineal v-model: 50

Fuerza al slider a saltar entre los valores definidos en range:

<Slider
    v-model="value"
    :range="{
        min: 0,
        '25%': 25,
        '50%': 50,
        '75%': 75,
        max: 100
    }"
    :snap="true"
/>

Teclado

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :keyboard-support="true"
    :keyboard-default-step="10"
    :keyboard-page-multiplier="5"
    :keyboard-multiplier="1"
/>

Prop	Default	Descripcion
keyboardSupport	true	Activa/desactiva el soporte de teclado
keyboardDefaultStep	10	Step por defecto para flechas
keyboardMultiplier	1	Multiplicador del step para flechas
keyboardPageMultiplier	5	Multiplicador para Page Up/Down

Handle Attributes

Atributos HTML personalizados por handle:

<Slider
    v-model="values"
    :range="{ min: 0, max: 100 }"
    :handle-attributes="[
        { 'aria-label': 'Precio minimo' },
        { 'aria-label': 'Precio maximo' }
    ]"
/>

CSS personalizado

Prefijo CSS

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    css-prefix="custom-slider-"
/>

Clases CSS

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :css-classes="{
        target: 'mi-slider',
        handle: 'mi-handle',
    }"
/>

Rangos no lineales

Rango no lineal v-model: 500

noUiSlider soporta rangos con distribucion no lineal:

<Slider
    v-model="value"
    :range="{
        min: 0,
        '10%': 100,
        '50%': 500,
        max: 1000
    }"
/>

TIP

En rangos no lineales, el step global solo aplica al primer segmento. Para definir step por segmento, usa la sintaxis [valor, step]:

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