Tooltips

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

Tooltips basicos

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

Formatter personalizado

Podes pasar un objeto con funcion to para formatear el texto del tooltip:

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

O directamente una funcion:

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

Tooltips por handle

Con multiples handles, se puede configurar cada tooltip individualmente:

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

Usar false para ocultar el tooltip de un handle especifico:

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

Tooltips solo al click

Tooltips solo al click v-model: 50

Hace click o arrastra el handle para ver el tooltip

Muestra los tooltips unicamente mientras interactuas con el handle (click o arrastre):

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

TIP

No necesitas activar tooltips por separado. tooltipOnClick los crea automaticamente.

Merge de tooltips

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

Threshold (%)

Cuando los handles estan muy cerca, sus tooltips pueden superponerse. El merge los fusiona en uno solo:

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

Propiedad	Default	Descripcion
threshold	15	Distancia porcentual minima para fusionar tooltips
separator	' - '	Texto separador entre valores fusionados

TIP

El merge requiere que tooltips este activado. Se puede combinar con tooltipOnClick.

Aria Format

Formatter para los atributos de accesibilidad:

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