ComponentsSlider
Slider
A slider allows users to make selections from a range of values. Think of it as a custom `<input type='range'/>` with the ability to achieve custom styling and accessibility.
A slider allows users to make selections from a range of values. Think of it as a custom `<input type='range'/>` with the ability to achieve custom styling and accessibility.
| Prop | Type | Default |
|---|---|---|
aria-label | string | |
aria-labelledby | string | |
asChild | boolean | |
defaultValue | number | |
dir | 'ltr' | 'rtl' | "ltr" |
disabled | boolean | |
focusThumbOnChange | boolean | |
form | string | |
getAriaValueText | (value: number) => string | |
getRootNode | () => ShadowRoot | Node | Document | |
id | string | |
ids | Partial<{
root: string
thumb: string
control: string
track: string
range: string
label: string
output: string
hiddenInput: string
}> | |
invalid | boolean | |
max | number | |
min | number | |
name | string | |
onValueChange | (details: ValueChangeDetails) => void | |
onValueChangeEnd | (details: ValueChangeDetails) => void | |
onValueChangeStart | (details: ValueChangeDetails) => void | |
orientation | 'horizontal' | 'vertical' | |
origin | 'center' | 'start' | |
readOnly | boolean | |
step | number | |
thumbAlignment | 'center' | 'contain' | |
thumbSize | Size | |
value | number |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
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 |