Tooltips

Tooltips con formatter v-model: [20,80]

Basic tooltips

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

Custom formatter

You can pass an object with a to function to format the tooltip text:

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :tooltips="{ to: (v) => '$' + v.toFixed(2) }"
/>

Or directly a function:

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :tooltips="(v) => Math.round(v) + '%'"
/>

Per-handle tooltips

With multiple handles, you can configure each tooltip individually:

<Slider
    v-model="values"
    :range="{ min: 0, max: 100 }"
    :tooltips="[
        { to: (v) => 'Min: ' + Math.round(v) },
        { to: (v) => 'Max: ' + Math.round(v) }
    ]"
/>

Use false to hide a specific handle's tooltip:

<Slider
    v-model="values"
    :range="{ min: 0, max: 100 }"
    :tooltips="[true, false]"
/>

Click-only tooltips

Tooltips solo al click v-model: 50

Hace click o arrastra el handle para ver el tooltip

Shows tooltips only while interacting with the handle (click or drag):

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :tooltip-on-click="true"
/>

TIP

You don't need to enable tooltips separately. tooltipOnClick creates them automatically.

Tooltip merging

Merge de tooltips v-model: [40,60]

Threshold (%)

When handles are very close, their tooltips can overlap. Merging combines them into one:

<Slider
    v-model="values"
    :range="{ min: 0, max: 100 }"
    :tooltips="true"
    :merge-tooltips="{ threshold: 15, separator: ' - ' }"
/>

Property	Default	Description
threshold	15	Minimum percentage distance to merge tooltips
separator	' - '	Separator text between merged values

TIP

Merging requires tooltips to be enabled. It can be combined with tooltipOnClick.

Aria Format

Formatter for accessibility attributes:

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :aria-format="{ to: (v) => v + ' percent' }"
/>