Pips

Pips are visual marks displayed below (or beside in vertical) the slider.

Modos de pips v-model: 50

Density

Basic pips

Shortcut with pipsys

The simplest way to enable pips with mode: 'steps':

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

Manual configuration

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

Pips modes

Steps

Generates pips based on the configured steps:

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

Range

Generates pips based on the range values:

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

Positions

Generates pips at specific percentage positions:

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

Count

Generates a fixed number of evenly distributed pips:

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

Density

Controls the density of minor marks between main pips. A lower value generates more marks.

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

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

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

Clickable pips

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

Hace click en cualquier numero de los pips

Allows clicking on pips to move the slider to that value:

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

Closest handle

When there are multiple handles, clicking a pip moves the closest handle to the selected value, not always the first one.

Formatted pips

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

WARNING

Pip values are rendered as HTML. If you use user input in the pips formatter, you need to escape HTML to prevent XSS.

Related methods

// Create or update pips
this.$refs.slider.setPips({ mode: 'steps', density: 3 });

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