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#

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/core"

import {
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
} from "@chakra-ui/core"

Usage#

<Slider defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

<Slider defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Editable Example

Changing the slider color#

<Slider colorScheme="pink" defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

<Slider colorScheme="pink" defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Editable Example

Customized Sliders#

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

<Slider defaultValue={30}>
  <SliderTrack bg="red.100">
    <SliderFilledTrack bg="tomato" />
  </SliderTrack>
  <SliderThumb boxSize={6}>
    <Box color="tomato" as={MdGraphicEq} />
  </SliderThumb>
</Slider>

<Slider defaultValue={30}>
  <SliderTrack bg="red.100">
    <SliderFilledTrack bg="tomato" />
  </SliderTrack>
  <SliderThumb boxSize={6}>
    <Box color="tomato" as={MdGraphicEq} />
  </SliderThumb>
</Slider>

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 onChangeEnd={(val) => console.log(val)}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

<Slider 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 focusThumbOnChange=false. This is normally used with a "controlled" slider value.

<Slider value={value} focusThumbOnChange={false}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

<Slider 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 it's children in the Box component, so you can pass all Box props to change it's style.

Name	Type	Description
`value`	`number`	The value of the slider.
`defaultValue`	`number`	The initial value of the slider.
`max`	`number`	Standard `input` max attribute.
`min`	`number`	Standard `input` min attribute.
`step`	`number`	Standard `input` step attribute.
`onChange`	`(value: number): void`	Callback fired when the value of the slider changes.
`onChangeEnd`	`(value: number): void`	Callback fired when the slider changes is done.
`isReadOnly`	`boolean`	If `true`, the slider will be in read-only mode.
`onFocus`	`Function`	Callback fired when the thumb receives focus
`onBlur`	`Function`	Callback fired when the thumb is blurred
`onMouseDown`	`Function
`aria-label`	`string`	The accessible label.
`aria-labelledby`	`string`	The `id` of the element that labels the sliders
`aria-valuetext`	`string`	The aria-valuetext of the switch for accessibility.
`orientation`	`string`	The orientation of the slider, only `horizontal` is supported for now.
`getAriaValueText`	`(value: number ): string`	The callback to format the `aria-valuetext`.
`size`	`sm`, `md`, `lg`	The size of the slider.
`colorScheme`	`string`	The color scheme to use for the slider. Use a color key in `theme.colors`
`name`	`string`	The name of the slider component when used in a form.
`id`	`string`	The id of the slider component when used in a form.
`children`	`React.ReactNode`	The children of the slider.
`isReversed`	`boolean`	If `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

Slider

.css-12m0k8p{pointer-events:auto;}Import.css-1l2j62r{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-1l2j62r:focus,.css-1l2j62r[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Changing the slider color#

Customized Sliders#

Getting the final value when dragging the slider#

Configure thumb focus with focusThumbOnChange#

useSlider#

Props#

Slider Props#

SliderThumb Props#

SliderFilledTrack Props#

SliderTrack Props#

Import#

Configure thumb focus with `focusThumbOnChange`#