Forms
Slider
A draggable single- or dual-thumb range input.
<UiSlider />Model value
modelValue is a number for one thumb, or a [min, max] tuple for a range slider — there's no separate range prop.
Passing an array modelValue (e.g. [25, 75]) switches it to a two-thumb range slider automatically — no separate range prop.
Min
min is the value at the left end of the track.
Max
max is the value at the right end of the track. Together with min it fixes what the thumb's position means — set them to the real bounds rather than scaling your values into 0–100 yourself.
Step
step is the increment the thumb snaps to.
Disabled
disabled disables interaction with the slider.
Color
color is the filled portion of the track, and the thumb.
Variant
variant decides how the filled portion is drawn. solid fills the track behind the thumb; outline leaves it transparent with a ring, which reads lighter over a busy surface.
Tooltip
tooltip shows the value above the thumb while dragging — drag one to see it.
tooltip only shows the current value while actively dragging, not on hover.
Wrapped in FormField
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
number | number[]0"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"'neutral'Emits
update:modelValue[value: number | number[]]Types
type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";