Formato

Formato: default v-model: 50

v-model siempre emite numeros: 50 (tipo: number)

Formato de valores

La propiedad format permite formatear los valores que muestra el slider (tooltips, .get()):

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

Funciones to y from

Funcion	Uso	Entrada	Salida
to	Formatea para mostrar	Numero	String formateado
from	Parsea de vuelta	String formateado o numero como string	Numero

WARNING

La funcion from puede recibir tanto strings formateados (ej: "$50.00") como numeros planos en formato string (ej: "50"). Asegurate de que tu funcion from maneje ambos casos.

Ejemplo: Moneda

format: {
    to: (v) => '$' + Number(v).toFixed(2),
    from: (v) => Number(String(v).replace('$', ''))
}

Ejemplo: Porcentaje

format: {
    to: (v) => Number(v).toFixed(0) + '%',
    from: (v) => Number(String(v).replace('%', ''))
}

Ejemplo: Tiempo

format: {
    to: (v) => {
        const h = Math.floor(v);
        const m = Math.round((v - h) * 60);
        return h + ':' + String(m).padStart(2, '0');
    },
    from: (v) => {
        const s = String(v);
        if (!s.includes(':')) return Number(s);
        const [h, m] = s.split(':').map(Number);
        return h + m / 60;
    }
}

v-model y formato

::: important El v-model siempre emite valores numericos crudos, independientemente del formato configurado:

// Con format: { to: v => '$' + v.toFixed(2), ... }
// v-model emite: 50 (numero)
// get() retorna: "$50.00" (string formateado)
// get(true) retorna: 50 (numero)

:::