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]Architecture
createSlider extends createModel — which itself extends createRegistry — so each thumb is a model ticket holding a shallowRef<number>, and values is derived from the ordered tickets rather than a standalone ref. It composes createNumeric for the pure value math: step snapping, min/max clamping, and value ↔ percentage conversion.
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.
Examples
FAQ
Register more than one thumb — call register({ value }) per thumb, or onboard([...]) for several at once. Each thumb is addressed by index, e.g. set(0, 30) and set(1, 60).
fromValue converts a thumb value to a track percentage (for positioning), fromPercent converts a percentage back to a snapped value (for pointer input). Together they form the loop fromPercent → set → fromValue.
Yes — it’s a pure math primitive, not a UI widget. The examples drive a media scrubber and a before/after theme comparison from the same fromPercent → set → fromValue loop with no Slider.* components.
set enforces a minimum gap between adjacent thumbs via the minStepsBetweenThumbs option, alongside clamping to min/max and snapping to the nearest step.
snap runs the result through toFixed, deriving the decimal places from step and min, so it corrects floating-point artifacts — snap(3 * 0.1) yields a clean 0.3.
disabled blocks all mutations; readonly keeps thumbs focusable but turns set, up, down, floor, and ceil into no-ops. Both accept a MaybeRefOrGetter.