Slider

SSlider is a slider for picking a number or a range. It is built on Reka UI (the slider role, aria-valuenow/min/max, arrow-key control) and reuses SFormField for the label, hint, error message and a11y wiring. v-model takes a number (a single thumb) or an array (a range).

Single value

Range

States

disabled blocks the slider; error (or explicit invalid) marks the field invalid and highlights the track; required marks the field as required.

Color

The color prop sets the color of the fill and the thumb from the palette.

Showing the value

showValue displays the current value in a bubble above the thumb. By default the bubble appears on hover, focus or drag; valueAlways keeps it visible at all times. The format is set with the value slot (a number by default) — for a range, the slot renders for each thumb.

API

Props

Name	Type	Default	Description
color	string	undefined	Accent color (fill/thumb): a name from the palette (primary/teal/teal-10).
id	string	undefined	Control id. Generated automatically (SSR-safe) when not set.
label	string	undefined	Field label.
hint	string	undefined	Hint below the field.
error	string	undefined	Error message. When set, the field is marked invalid.
invalid	boolean	false	Marks the field invalid explicitly (in addition to error).
required	boolean	false	Marks the field as required.
disabled	boolean	false	Disables the slider.
min	number	0	Minimum value.
max	number	100	Maximum value.
step	number	1	Value step.
show-value	boolean	false	Shows the current value in a bubble above the thumb.
value-always	boolean	false	Keeps the value bubble always visible. Otherwise it shows only on hover, focus, or drag.
model-value	number | number[]	undefined	Slider value: a number for a single thumb or an array for a range. Two-way binding via v-model. Without an explicit value the slider starts at min (see the getter below), not 0: a default in defineModel cannot reference props, so the fallback lives in the getter.

Events

Name	Signature	Description
update:modelValue	( value: | number | number[] | undefined ) => void	Emitted when modelValue changes. Used for two-way binding (v-model).

Slots

Name	Description
value	Value bubble content. Defaults to the number; to show "%" or a "20–70" range, format it here. Rendered for each thumb.