createSlider
Slider state composable for single-thumb, range, and multi-thumb sliders. Handles value math, step snapping, and percentage conversion.
Usage
The createSlider composable manages a number[] of thumb values with configurable min/max/step bounds. It provides pure math functions (snap, fromValue, fromPercent) and index-based thumb operations (set, up, down).
import { createSlider } from '@vuetify/v0'
const slider = createSlider({ min: 0, max: 100, step: 5 })
// Each thumb is a registered ticket with a shallowRef<number> value
const thumb = slider.register({ value: 50 })
slider.up(0) // values: [55]
slider.fromValue(50) // 50
slider.snap(47) // 45 (nearest step of 5)
// Range — register two thumbs individually
const slider2 = createSlider({ min: 0, max: 100, step: 1 })
slider2.register({ value: 25 })
slider2.register({ value: 75 })
// Or register multiple thumbs at once with onboard()
const slider3 = createSlider({ min: 0, max: 100, step: 1 })
slider3.onboard([{ value: 0 }, { value: 50 }, { value: 100 }])
slider2.set(0, 30) // values: [30, 75]
slider2.set(1, 60) // values: [30, 60]Reactivity
Slider state is always reactive. Values and derived properties update automatically.
| Property/Method | Reactive | Notes |
|---|---|---|
values | Ref — all thumb values | |
disabled | Ref — accepts MaybeRefOrGetter; blocks all mutations | |
readonly | Ref — accepts MaybeRefOrGetter; thumbs remain focusable but set, up, down, floor, ceil are no-ops | |
orientation | Ref — accepts MaybeRefOrGetter | |
inverted | Ref — accepts MaybeRefOrGetter | |
snap | Pure function — rounds to nearest step with decimal precision correction | |
fromValue | Pure function — value to percentage | |
fromPercent | Pure function — percentage to value |
Value constraints set automatically clamps to min/max, snaps to the nearest step, and enforces minimum distance between adjacent thumbs via minStepsBetweenThumbs.
Decimal precision snap uses toFixed to correct floating-point artifacts. The number of decimal places is derived from step and min, so snap(3 * 0.1) returns 0.3 — not 0.30000000000000004.