ComponentsRange slider
Range Slider
A range slider is a multi-thumb slider used to select a range between two numbers.
A range slider is a multi-thumb slider used to select a range between two numbers.
API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.
string[]
The aria-label of each slider thumb. Useful for providing an accessible name to the slider
string[]
The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
number[]
'ltr' | 'rtl'
The document's text/writing direction.
boolean
Whether the slider is disabled
string
The associate form of the underlying input element.
(value: number, index: number) => string
Function that returns a human readable value for the slider thumb
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The unique identifier of the machine.
Partial<{ root: string thumb(index: number): string control: string track: string range: string label: string output: string marker(index: number): string }>
The ids of the elements in the range slider. Useful for composition.
boolean
Whether the slider is invalid
number
The maximum value of the slider
number
The minimum value of the slider
number
The minimum permitted steps between multiple thumbs.
string
The name associated with each slider thumb (when used in a form)
(details: FocusChangeDetails) => void
Function invoked when the slider's focused index changes
(details: ValueChangeDetails) => void
Function invoked when the value of the slider changes
(details: ValueChangeDetails) => void
Function invoked when the slider value change is done
(details: ValueChangeDetails) => void
Function invoked when the slider value change is started
'horizontal' | 'vertical'
The orientation of the slider
boolean
Whether the slider is read-only
number
The step value of the slider
'center' | 'contain'
The alignment of the slider thumb relative to the track - `center`: the thumb will extend beyond the bounds of the slider track. - `contain`: the thumb will be contained within the bounds of the track.
{ width: number; height: number }
The slider thumbs dimensions
number[]
The value of the range slider
Dict<any>
(index: number) => void
Function to decrement the value of the slider at the given index.
() => void
Function to focus the slider. This focuses the first thumb.
(index: number) => Dict<any>
(props: MarkerProps) => Dict<any>
(percent: number) => number
Returns the value of the thumb at the given percent.
(index: number) => number
Returns the max value of the thumb at the given index.
(index: number) => number
Returns the min value of the thumb at the given index.
(index: number) => number
Returns the percent of the thumb at the given index.
(index: number) => Dict<any>
(index: number) => number
Returns the value of the thumb at the given index.
(value: number) => number
Returns the percent of the thumb at the given index.
(index: number) => void
Function to increment the value of the slider at the given index.
boolean
Whether the slider is being dragged.
boolean
Whether the slider is focused.
Dict<any>
Dict<any>
Dict<any>
Dict<any>
Dict<any>
(index: number, percent: number) => void
Sets the percent of the thumb at the given index.
(index: number, value: number) => void
Sets the value of the thumb at the given index.
(value: number[]) => void
Function to set the value of the slider.
Dict<any>
number[]
The value of the slider.
number
number