Slider

An input where the user selects a value from within a given range. Drag the thumb, tap the track, or use the arrow keys when focused.

Usage

@Local volume: number = 50;

SSlider({ value: this.volume!!, max: 100, step: 1 })
SSlider({ defaultValue: 0.3, min: 0, max: 1, step: 0.05 })
SSlider({ defaultValue: 25, disabled: true })

Approximate web preview — the HarmonyOS rendering is the reference.

Range

Two thumbs that never cross; the value bubble shows while dragging.

@Local price: number[] = [200, 800];

SSlider({ values: this.price!!, min: 0, max: 1000, step: 10, tooltip: 'active',
  formatValue: (v: number) => `$${v}` })

Approximate web preview — the HarmonyOS rendering is the reference.

Ticks, marks & tooltip

SSlider({ defaultValue: 2, min: 0, max: 4, step: 1, ticks: true,
  marks: [0, 1, 2, 3, 4], formatValue: (v: number) => ['XS', 'S', 'M', 'L', 'XL'][v] })
SSlider({ defaultValue: 60, tooltip: 'always', formatValue: (v: number) => `${v}%` })

Approximate web preview — the HarmonyOS rendering is the reference.

Vertical

orientation: 'vertical' with a length; the value grows upward.

Row({ space: 32 }) {
  SSlider({ defaultValue: 40, orientation: 'vertical', length: 140 })
  SSlider({ defaultValues: [20, 70], orientation: 'vertical', length: 140, marks: [0, 50, 100] })
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SSlider

shadcn-vue Slider, custom drawn: h-1.5 rounded-full bg-muted track, bg-primary range, size-4 rounded-full border border-primary bg-background shadow-sm thumb with a ring-4 ring-ring/50 on hover / drag. Drag a thumb or tap the track; arrow keys step when focused.

Variants:

• range: pass values / defaultValues with two numbers for two thumbs (onValuesChange); thumbs never cross.
• ticks (a dot per step) and marks (labelled values under / beside the track, via formatValue).
• orientation: 'vertical' (value grows upward; give it a length, default 160vp).
• keyboard: arrows step the value (in range mode, the thumb touched last).
• tooltip: 'active' shows the value above the thumb while dragging / hovering / focused, 'always' keeps it.

Prop	Type	Default	Description
value!!	number | undefined	undefined	Controlled value (use with !!). Leave undefined for uncontrolled.
defaultValue	number	0
values!!	number[] | undefined	undefined	Controlled two-thumb range [low, high] (use with !!).
defaultValues	number[]	[]	Uncontrolled initial range; two numbers turn on range mode.
min	number	0
max	number	100
step	number	1
disabled	boolean	false
orientation	SliderOrientation SliderOrientation = 'horizontal' | 'vertical'	'horizontal'
length	number	160	Length of a vertical slider (vp).
ticks	boolean	false	A dot at every step (up to 41 steps).
marks	number[]	[]	Labelled values along the track.
tooltip	SliderTooltip SliderTooltip = 'none' | 'active' | 'always'	'none'
formatValue	(v: number) => string	(v: number): string => `${v}`	Text of tooltips and marks.
label	string | undefined	undefined	Accessible name.

Event	Type	Default	Description
onValueChange	(v: number) => void	() => { }
onValueCommit	(v: number) => void	() => { }	Fired once when a drag / tap / key interaction ends.
onValuesChange	(v: number[]) => void	() => { }
onValuesCommit	(v: number[]) => void	() => { }	Range mode: fired once when an interaction ends.