Components
Slider

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.

UsageTypes

API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.

SliderProps

aria-label

string

The aria-label of the slider. Useful for providing an accessible name to the slider

aria-labelledby

string

The `id` of the element that labels the slider. Useful for providing an accessible name to the slider

defaultValue

number

dir

'ltr' | 'rtl'

The document's text/writing direction.

disabled

boolean

Whether the slider is disabled

focusThumbOnChange

boolean

Whether to focus the slider thumb after interaction (scrub and keyboard)

form

string

The associate form of the underlying input element.

getAriaValueText

(value: number) => string

Function that returns a human readable value for the slider

getRootNode

() => ShadowRoot | Node | Document

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

id

string

The unique identifier of the machine.

ids

Partial<{ root: string thumb: string control: string track: string range: string label: string output: string hiddenInput: string }>

The ids of the elements in the slider. Useful for composition.

invalid

boolean

Whether the slider value is invalid

max

number

The maximum value of the slider

min

number

The minimum value of the slider

name

string

The name associated with the slider (when used in a form)

onValueChange

(details: ValueChangeDetails) => void

Function invoked when the value of the slider changes

onValueChangeEnd

(details: ValueChangeDetails) => void

Function invoked when the slider value change is done

onValueChangeStart

(details: ValueChangeDetails) => void

Function invoked when the slider value change is started

orientation

'horizontal' | 'vertical'

The orientation of the slider

origin

'center' | 'start'

- "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative)

readOnly

boolean

Whether the slider is read-only

step

number

The step value of the slider

thumbAlignment

'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.

thumbSize

Size

The slider thumb dimensions.If not provided, the thumb size will be measured automatically.

value

number

The value of the slider

SliderContext

controlProps

Dict<any>

decrement

() => void

Function to decrement the value of the slider by the step.

focus

() => void

Function to focus the slider.

getMarkerProps

(props: MarkerProps) => Dict<any>

getPercentValue

(percent: number) => number

Returns the value of the slider at the given percent.

getValuePercent

(value: number) => number

Returns the percent of the slider at the given value.

hiddenInputProps

Dict<any>

increment

() => void

Function to increment the value of the slider by the step.

isDragging

boolean

Whether the slider is being dragged.

isFocused

boolean

Whether the slider is focused.

labelProps

Dict<any>

markerGroupProps

Dict<any>

outputProps

Dict<any>

percent

number

The value of the slider as a percent.

rangeProps

Dict<any>

rootProps

Dict<any>

setValue

(value: number) => void

Function to set the value of the slider.

thumbProps

Dict<any>

trackProps

Dict<any>

value

number

The value of the slider.

SliderMarkerProps

value

number