Slider

Overview

A range slider built on Reka UI's SliderRoot, rendering a track, range fill, and draggable thumbs.

Theme entry: Slider

Props

Name	Type	Required	Default	Description
themeOverride	Object		null	A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants.
class	string|array|object		undefined	Additional CSS classes to apply to the slider root.
defaultValue	array		undefined	The default value(s) when uncontrolled.
modelValue	array		undefined	The controlled value(s) (used with v-model).
disabled	boolean		undefined	Whether the slider is disabled.
orientation	string		undefined	The orientation of the slider.
dir	string		undefined	The reading direction.
inverted	boolean		undefined	Whether the slider is visually inverted.
min	number		undefined	The minimum value.
max	number		undefined	The maximum value.
step	number		undefined	The step increment between values.
minStepsBetweenThumbs	number		undefined	The minimum number of steps between multiple thumbs.
thumbAlignment	string		undefined	How thumbs align relative to the track end.
as	string|object		undefined	The element or component to render as.
asChild	boolean		false	When true, merges props onto the child element instead of rendering a wrapper.
name	string		undefined	The name submitted with a form.
required	boolean		undefined	Whether the field is required.

Events

Name	Description
update:modelValue	Emitted when the value changes.

Full event reference

Source

client/lib/controls/slider/Slider.vue