useSliderState

Provides state management for a slider component. Stores values for all thumbs and formats values for localization. Also provides methods to update the position of any thumbs.

install	`yarn add @react-stately/slider`
version	3.0.0-alpha.3
usage	`import {useSliderState} from '@react-stately/slider'`

View repository

GitHub

View package

NPM

API#

useSliderState(
  (props: SliderProps
)): SliderState

Interface#

Name	Type	Description
`values`	`number[]`	Values managed by the slider by thumb index.
`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.
`focusedThumb`	`number \| undefined`	Currently-focused thumb index.
`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.
`step`	`number`	The step amount for the slider.

Name	Type	Default	Description
`onChangeEnd`	`( (value: number[] )) => void`	—	Fired when the slider stops moving, due to being let go.
`orientation`	`Orientation`	`'horizontal'`	The orientation of the Slider.
`isDisabled`	`boolean`	—	Whether the whole Slider is disabled.
`formatOptions`	`Intl.NumberFormatOptions`	—	The display format of the value label.
`minValue`	`number`	—	The smallest value allowed for the input.
`maxValue`	`number`	—	The largest value allowed for the input.
`step`	`number`	—	The amount that the input value changes with each increment or decrement "tick".
`label`	`ReactNode`	—	The content to display as the label.
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.
`value`	`number[]`	—	The current value (controlled).
`defaultValue`	`number[]`	—	The default value (uncontrolled).
`onChange`	`( (value: number[] )) => void`	—	Handler that is called when the value changes.

'horizontal' | 'vertical'

Name	Type	Description
`values`	`number[]`	Values managed by the slider by thumb index.
`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.
`focusedThumb`	`number \| undefined`	Currently-focused thumb index.
`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.
`step`	`number`	The step amount for the slider.