Slider

The Slider is used to allow users to make selections from a range of values.

chakra ui pro
Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.
Ads via Chakra UI

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#

Chakra 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.
import {
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
} from "@chakra-ui/react"

Usage#

Note: We recommend adding a aria-label or aria-labelledby prop to provide an accessible label for the Slider.

Editable Example

Changing the slider color scheme#

Editable Example

Changing the slider orientation#

Editable Example

Customizing the Slider#

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

Editable Example

Discrete Sliders#

Discrete sliders allow you to snap to predefined sets of values. This can be accomplished using the step prop.

Editable Example

Getting the final value when dragging the slider#

Dragging the slider can trigger lots of updates and the user might only be interested in the final result after sliding is complete. You can use onChangeEnd for this.

<Slider aria-label="slider-ex-5" onChangeEnd={(val) => console.log(val)}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Configure thumb focus with focusThumbOnChange#

By default SliderThumb will receive focus whenever value changes. You can opt-out of this behavior by setting the value of focusThumbOnChange to false. This is normally used with a "controlled" slider value.

<Slider aria-label="slider-ex-5" value={value} focusThumbOnChange={false}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

useSlider#

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

Props#

Slider Props#

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

NameTypeDescriptionDefault
aria-labelstringThe static string to use used for `aria-label` if no visible label is used.-
aria-labelledbystringThe static string `aria-labelledby` that points to the ID of the element that serves as label for the slider-
aria-valuetextstringThe static string to use used for `aria-valuetext`-
colorScheme"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram""blue"
defaultValuenumberThe initial value of the slider in uncontrolled mode-
focusThumbOnChangebooleanIf `false`, the slider handle will not capture focus when value changes.true
getAriaValueText((value: number) => string)Function that returns the `aria-valuetext` for screen readers. It is mostly used to generate a more human-readable representation of the value for assistive technologies-
idstringThe base `id` to use for the slider and its components-
isDisabledbooleanIf `true`, the slider will be disabled-
isReadOnlybooleanIf `true`, the slider will be in `read-only` state-
isReversedbooleanIf `true`, the value will be incremented or decremented in reverse.-
maxnumberThe maximum allowed value of the slider. Cannot be less than min.100
minnumberThe minimum allowed value of the slider. Cannot be greater than max.0
namestringThe name attribute of the hidden `input` field. This is particularly useful in forms-
onChange((value: number) => void)function gets called whenever the slider handle is being dragged or clicked-
onChangeEnd((value: number) => void)function gets called whenever the user stops dragging the slider handle.-
onChangeStart((value: number) => void)function gets called whenever the user starts dragging the slider handle-
size"sm" | "md" | "lg""md"
stepnumberThe step in which increments/decrements have to be made1
valuenumberThe value of the slider in controlled mode-
variantstringVariants for Slider are not implemented in the default theme. You can extend the theme to implement them.-

SliderThumb Props#

SliderThumb composes Box so you can pass all Box props to change its style.

SliderFilledTrack Props#

SliderFilledTrack composes Box so you can pass all Box props to change its style.

SliderTrack Props#

SliderTrack composes Box so you can pass all Box props to change its style.

Edit this page