Slider

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

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.

<Slider aria-label="slider-ex-1" defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

<Slider aria-label="slider-ex-1" defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Editable Example

Changing the slider color scheme#

<Slider aria-label="slider-ex-2" colorScheme="pink" defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

<Slider aria-label="slider-ex-2" colorScheme="pink" defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Editable Example

Changing the slider orientation#

<Slider
  aria-label="slider-ex-3"
  defaultValue={30}
  orientation="vertical"
  minH="32"
>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

<Slider
  aria-label="slider-ex-3"
  defaultValue={30}
  orientation="vertical"
  minH="32"
>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Editable Example

Customizing the Slider#

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

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

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

Editable Example

Discrete Sliders#

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

<Slider defaultValue={60} min={0} max={300} step={30}>
  <SliderTrack bg="red.100">
    <Box position="relative" right={10} />
    <SliderFilledTrack bg="tomato" />
  </SliderTrack>
  <SliderThumb boxSize={6} />
</Slider>

<Slider defaultValue={60} min={0} max={300} step={30}>
  <SliderTrack bg="red.100">
    <Box position="relative" right={10} />
    <SliderFilledTrack bg="tomato" />
  </SliderTrack>
  <SliderThumb boxSize={6} />
</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 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.

Name	Type	Description	Default
aria-label	`string`	The static string to use used for `aria-label` if no visible label is used.	-
aria-labelledby	`string`	The static string `aria-labelledby` that points to the ID of the element that serves as label for the slider	-
aria-valuetext	`string`	The 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"`
defaultValue	`number`	The initial value of the slider in uncontrolled mode	-
focusThumbOnChange	`boolean`	If `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	-
id	`string`	The base `id` to use for the slider and its components	-
isDisabled	`boolean`	If `true`, the slider will be disabled	-
isReadOnly	`boolean`	If `true`, the slider will be in `read-only` state	-
isReversed	`boolean`	If `true`, the value will be incremented or decremented in reverse.	-
max	`number`	The maximum allowed value of the slider. Cannot be less than min.	`100`
min	`number`	The minimum allowed value of the slider. Cannot be greater than max.	`0`
name	`string`	The 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"`
step	`number`	The step in which increments/decrements have to be made	`1`
value	`number`	The value of the slider in controlled mode	-
variant	`string`	Variants 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

Slider

Usage#

Changing the slider color scheme#

Changing the slider orientation#

Customizing the Slider#

Discrete Sliders#

Getting the final value when dragging the slider#

Configure thumb focus with focusThumbOnChange#

useSlider#

Props#

Slider Props#

SliderThumb Props#

SliderFilledTrack Props#

SliderTrack Props#

Configure thumb focus with `focusThumbOnChange`#