useSliderState
Provides state management for a slider component. Stores values for all thumbs, formats values for localization, and provides methods to update the position of any thumbs.
| install | yarn add react-stately |
|---|---|
| version | 3.21.0 |
| usage | import {useSliderState} from 'react-stately' |
API#
useSliderState<T extends number | number[]>(
(props: SliderStateOptions<T>
)): SliderState
Interface#
Properties
| Name | Type | Description |
values | number[] | Values managed by the slider by thumb index. |
focusedThumb | number | undefined | Currently-focused thumb index. |
step | number | The step amount for the slider. |
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
| Method | Description |
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
)): 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. |
Example#
See the docs for useSlider in react-aria for an example of useSliderState.