Range Slider

A range slider is a multi-thumb slider used to select a range between two numbers.

API Reference

Prop	Type	Default
aria-label	string[]
aria-labelledby	string[]
asChild	boolean
defaultValue	number[]
dir	'ltr' \| 'rtl'
disabled	boolean
form	string
getAriaValueText	(value: number, index: number) => string
getRootNode	() => ShadowRoot \| Node \| Document
id	string
ids	Partial<{ root: string thumb(index: number): string control: string track: string range: string label: string output: string marker(index: number): string }>
invalid	boolean
max	number
min	number
minStepsBetweenThumbs	number
name	string
onFocusChange	(details: FocusChangeDetails) => void
onValueChange	(details: ValueChangeDetails) => void
onValueChangeEnd	(details: ValueChangeDetails) => void
onValueChangeStart	(details: ValueChangeDetails) => void
orientation	'horizontal' \| 'vertical'
readOnly	boolean
step	number
thumbAlignment	'center' \| 'contain'
thumbSize	{ width: number; height: number }
value	number[]

Prop	Type	Default
asChild	boolean

Prop	Type	Default
asChild	boolean

Prop	Type	Default
index	number
asChild	boolean

Prop	Type	Default
asChild	boolean

Prop	Type	Default
value	number
asChild	boolean

Prop	Type	Default
asChild	boolean

Prop	Type	Default
asChild	boolean

Prop	Type	Default
asChild	boolean