Pips

Los pips son marcas visuales que se muestran debajo (o al lado en vertical) del slider.

Modos de pips v-model: 50

Density

Pips basicos

Atajo con pipsys

La forma mas simple de activar pips con mode: 'steps':

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

Configuracion manual

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :pips="{
        mode: 'steps',
        density: 3
    }"
/>

Modos de pips

Steps

Genera pips basados en los steps configurados:

:pips="{ mode: 'steps', density: 3 }"

Range

Genera pips basados en los valores del rango:

:pips="{ mode: 'range', density: 3 }"

Positions

Genera pips en posiciones porcentuales especificas:

:pips="{
    mode: 'positions',
    values: [0, 25, 50, 75, 100],
    density: 3
}"

Count

Genera una cantidad fija de pips distribuidos uniformemente:

:pips="{
    mode: 'count',
    values: 5,
    density: 3
}"

Density

Controla la densidad de las marcas menores entre los pips principales. Un valor menor genera mas marcas.

<!-- Muy denso -->
:pips="{ mode: 'steps', density: 1 }"

<!-- Moderado -->
:pips="{ mode: 'steps', density: 3 }"

<!-- Espaciado -->
:pips="{ mode: 'steps', density: 10 }"

Pips clickeables

Pips clickeables (mueve handle mas cercano) v-model: [20,80]

Hace click en cualquier numero de los pips

Permite hacer click en los pips para mover el slider a ese valor:

<Slider
    v-model="values"
    :range="{ min: 0, max: 100 }"
    :pips="{ mode: 'steps', density: 3 }"
    :clickable-pips="true"
/>

Handle mas cercano

Cuando hay multiples handles, al hacer click en un pip se mueve el handle mas cercano al valor seleccionado, no siempre el primero.

Pips con formato

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :pips="{
        mode: 'steps',
        density: 3,
        format: {
            to: (v) => '$' + v
        }
    }"
/>

WARNING

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

Metodos relacionados

// Crear o actualizar pips
this.$refs.slider.setPips({ mode: 'steps', density: 3 });

// Remover pips
this.$refs.slider.removePips();