useSlider

Provides the behavior and accessibility implementation for a slider component representing one or more values.

Opacity60

Example

Slider.tsx

Slider.css

Form.css

Example

Slider.tsx

Slider.css

Form.css

import {Slider} from './Slider';

<Slider label="Opacity" defaultValue={60} />

API

<Slider>
  <Label />
  <SliderOutput />
  <SliderTrack>
    <SliderFill />
    <SliderThumb />
    <SliderThumb>
      <Label />
    </SliderThumb>
  </SliderTrack>
</Slider>

useSliderState<T extends number | number[]>(props: SliderStateOptions<T>): SliderState

useSlider<T extends number | number[]>(
  props: AriaSliderProps<T>,
state: SliderState,
trackRef: RefObject<Element | null>
): SliderAria

useSliderThumb(opts: AriaSliderThumbOptions, state: SliderState): SliderThumbAria

SliderState

Properties

Name	Type
`values`	`number[]`
Values managed by the slider by thumb index.
`defaultValues`	`number[]`
The default values for each thumb.
`focusedThumb`	`number \| undefined`
Currently-focused thumb index.
`pageSize`	`number`
The page size for the slider, used to do a bigger step.
`orientation`	`Orientation`
The orientation of the slider.
`isDisabled`	`boolean`
Whether the slider is disabled.

Methods

`getThumbValue(index: number): number`
Get the value for the specified thumb.
`setThumbValue(index: number, value: number): void`
Sets the value for the specified thumb. The actual value set will be clamped and rounded according to min/max/step.
`setThumbPercent(index: number, percent: number): void`
Sets value for the specified thumb by percent offset (between 0 and 1).
`isThumbDragging(index: number): boolean`
Whether the specific thumb is being dragged.
`setThumbDragging(index: number, dragging: boolean): void`
Set is dragging on the specified thumb.
`setFocusedThumb(index: number \| undefined): void`
Set focused true on specified thumb. This will remove focus from any thumb that had it before.
`getThumbPercent(index: number): number`
Returns the specified thumb's value as a percentage from 0 to 1.
`getValuePercent(value: number): number`
Returns the value as a percent between the min and max of the slider.
`getThumbValueLabel(index: number): string`
Returns the string label for the specified thumb's value, per props.formatOptions.
`getFormattedValue(value?: number \| number[]): string`
Returns the string label for the value, per props.formatOptions.
`getThumbMinValue(index: number): number`
Returns the min allowed value for the specified thumb.
`getThumbMaxValue(index: number): number`
Returns the max allowed value for the specified thumb.
`getPercentValue(percent: number): number`
Converts a percent along track (between 0 and 1) to the corresponding value.
`isThumbEditable(index: number): boolean`
Returns if the specified thumb is editable.
`setThumbEditable(index: number, editable: boolean): void`
Set the specified thumb's editable state.
`incrementThumb(index: number, stepSize?: number): void`
Increments the value of the thumb by the step or page amount.
`decrementThumb(index: number, stepSize?: number): void`
Decrements the value of the thumb by the step or page amount.

AriaSliderProps

Name	Type	Default
`orientation`	`Orientation`	Default: `'horizontal'`
The orientation of the Slider.
`isDisabled`	`boolean`	Default: —
Whether the whole Slider is disabled.

`value`	`T`	Default: —
The current value (controlled).
`defaultValue`	`T`	Default: —
The default value (uncontrolled).
`onChange`	`(value: T) => void`	Default: —
Handler that is called when the value changes.
`onChangeEnd`	`(value: T) => void`	Default: —
Fired when the slider stops moving, due to being let go.

SliderAria

Name	Type
`labelProps`	`LabelHTMLAttributes<HTMLLabelElement>`
Props for the label element.
`groupProps`	`DOMAttributes`
Props for the root element of the slider component; groups slider inputs.
`trackProps`	`DOMAttributes`
Props for the track element.
`outputProps`	`OutputHTMLAttributes<HTMLOutputElement>`
Props for the output element, displaying the value of the slider thumbs.

AriaSliderThumbOptions

Name	Type	Default
`trackRef`	`RefObject<Element \| null>`	Default: —
A ref to the track element.
`inputRef`	`RefObject<HTMLInputElement \| null>`	Default: —
A ref to the thumb input element.
`isDisabled`	`boolean`	Default: —
Whether the Thumb is disabled.
`index`	`number`	Default: `0`
Index of the thumb within the slider.

SliderThumbAria

Name	Type
`thumbProps`	`DOMAttributes`
Props for the root thumb element; handles the dragging motion.
`inputProps`	`InputHTMLAttributes<HTMLInputElement>`
Props for the visually hidden range input element.
`labelProps`	`LabelHTMLAttributes<HTMLLabelElement>`
Props for the label element for this thumb (optional).
`isDragging`	`boolean`
Whether this thumb is currently being dragged.
`isFocused`	`boolean`
Whether the thumb is currently focused.
`isDisabled`	`boolean`
Whether the thumb is disabled.