Format

Formato: default v-model: 50

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

Value formatting

The format property allows formatting the values displayed by the 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('$', ''))
    }"
/>

to and from functions

Function	Usage	Input	Output
to	Formats for display	Number	Formatted string
from	Parses back	Formatted string (e.g. "$50") or plain number as string (e.g. "50")	Number

WARNING

The from function can receive both formatted strings (e.g. "$50.00") and plain numbers as strings (e.g. "50"). Make sure your from function handles both cases.

Example: Currency

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

Example: Percentage

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

Example: Time

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 and format

::: important v-model always emits raw numeric values, regardless of the configured format:

// With format: { to: v => '$' + v.toFixed(2), ... }
// v-model emits: 50 (number)
// get() returns: "$50.00" (formatted string)
// get(true) returns: 50 (number)

:::