Slider

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.

Import#

Rock UI export 4 components for Slider:

  • Slider: The wrapper that provides context and functionality for all children.
  • SliderTrack: The empty part of the slider that shows the track.
  • SliderFilledTrack: The filled part of the slider.
  • SliderThumb: The handle that's used to change the slider value.

Usage#

Editable Example

Changing the slider color#

Editable Example

Customized Sliders#

Slider component was designed to be composed to make it easy for you to customize its styles.

Editable Example

Getting value after slide in done#

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 is complete.

useSlider#

We've exported the useSlider hook to help users manage and build custom slider UIs.

Props#

Slider Props#

The Slider component wraps all it's children in the Box component, so you can pass all Box props to change it's style.

NameTypeDefaultDescription
valuenumberThe value of the slider.
defaultValuenumberThe initial value of the slider.
maxnumberStandard input max attribute.
minnumberStandard input min attribute.
stepnumberStandard input step attribute.
onChange(value: number): voidCallback fired when the value of the slider changes.
onChangeEnd(value: number): voidCallback fired when the slider changes is done.
isReadOnlybooleanIf true, the slider will be in read-only mode.
onFocusFunctionCallback fired when the thumb receives focus
onBlurFunctionCallback fired when the thumb is blurred
onMouseDown`Function
aria-labelstringThe accessible label.
aria-labelledbystringThe id of the element that labels the sliders
aria-valuetextstringThe aria-valuetext of the switch for accessibility.
orientationstringThe orientation of the slider, only horizontal is supported for now.
getAriaValueText(value: number ): stringThe callback to format the aria-valuetext.
sizesm, md, lgThe size of the slider.
colorSchemestringThe color scheme to use for the slider. Use a color key in theme.colors
namestringThe name of the slider component when used in a form.
idstringThe id of the slider component when used in a form.
childrenReact.ReactNodeThe children of the slider.
isReversedbooleanIf true, it'll reverse the direction and functionality of the slider

SliderThumb Props#

SliderThumb composes Box so you can pass all Box props to change it's style.

SliderFilledTrack Props#

SliderFilledTrack composes Box so you can pass all Box props to change it's style.

SliderTrack Props#

SliderTrack composes Box so you can pass all Box props to change it's style.

Edit this page

Made byChakraandRock Content