The Slider is used to allow users to make selections from a range of values.
Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
Rock UI export 4 components for Slider:
Slider component was designed to be composed to make it easy for you to customize its styles.
Added support for the
onChangeEnd prop. Dragging the slider can trigger lots
of updates and user might only be interested in the final result after sliding
We've exported the
useSlider hook to help users manage and build custom slider
Slider component wraps all it's children in the Box
component, so you can pass all
Box props to change it's style.
|The value of the slider.|
|The initial value of the slider.|
|Callback fired when the value of the slider changes.|
|Callback fired when the slider changes is done.|
|Callback fired when the thumb receives focus|
|Callback fired when the thumb is blurred|
|The accessible label.|
|The aria-valuetext of the switch for accessibility.|
|The orientation of the slider, only |
|The callback to format the |
|The size of the slider.|
|The color scheme to use for the slider. Use a color key in |
|The name of the slider component when used in a form.|
|The id of the slider component when used in a form.|
|The children of the slider.|
SliderThumb composes Box so you can pass all Box props to change it's style.
SliderFilledTrack composes Box so you can pass all Box props to change it's style.
SliderTrack composes Box so you can pass all Box props to change it's style.