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[]`
`getThumbValue`	`( (index: number )) => number`
`setThumbValue`	`( (index: number, , value: number )) => void`
`setThumbPercent`	`( (index: number, , percent: number )) => void`
`isThumbDragging`	`( (index: number )) => boolean`
`setThumbDragging`	`( (index: number, , dragging: boolean )) => void`
`focusedThumb`	`number \| undefined`
`setFocusedThumb`	`( (index: number \| \| undefined )) => void`
`getThumbPercent`	`( (index: number )) => number`
`getValuePercent`	`( (value: number )) => number`
`getThumbValueLabel`	`( (index: number )) => string`
`getFormattedValue`	`( (value: number )) => string`
`getThumbMinValue`	`( (index: number )) => number`
`getThumbMaxValue`	`( (index: number )) => number`
`getPercentValue`	`( (percent: number )) => number`
`isThumbEditable`	`( (index: number )) => boolean`
`setThumbEditable`	`( (index: number, , editable: boolean )) => void`
`step`	`number`

Name	Type	Description
`onChangeEnd`	`( (value: number[] )) => void`
`orientation`	`Orientation`
`isDisabled`	`boolean`
`formatOptions`	`Intl.NumberFormatOptions`
`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[]`
`getThumbValue`	`( (index: number )) => number`
`setThumbValue`	`( (index: number, , value: number )) => void`
`setThumbPercent`	`( (index: number, , percent: number )) => void`
`isThumbDragging`	`( (index: number )) => boolean`
`setThumbDragging`	`( (index: number, , dragging: boolean )) => void`
`focusedThumb`	`number \| undefined`
`setFocusedThumb`	`( (index: number \| \| undefined )) => void`
`getThumbPercent`	`( (index: number )) => number`
`getValuePercent`	`( (value: number )) => number`
`getThumbValueLabel`	`( (index: number )) => string`
`getFormattedValue`	`( (value: number )) => string`
`getThumbMinValue`	`( (index: number )) => number`
`getThumbMaxValue`	`( (index: number )) => number`
`getPercentValue`	`( (percent: number )) => number`
`isThumbEditable`	`( (index: number )) => boolean`
`setThumbEditable`	`( (index: number, , editable: boolean )) => void`
`step`	`number`