Slider

Usage

import { Slider } from "@chakra-ui/react"

<Slider.Root>
  <Slider.Label />
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb>
      <Slider.DraggingIndicator />
      <Slider.HiddenInput />
    </Slider.Thumb>
    <Slider.MarkerGroup>
      <Slider.Marker />
    </Slider.MarkerGroup>
  </Slider.Control>
</Slider.Root>

Shortcuts

Slider.Thumbs

This component renders the Slider.Thumb and Slider.HiddenInput components for each value.

The code below works:

<Slider.Thumb index={0}>
  <Slider.HiddenInput />
</Slider.Thumb>

but this might be better if you don't need to customize the thumb:

<Slider.Thumbs />

Slider.Marks

This component renders the Slider.MarkerGroup and Slider.Marker components for each value.

The code below works:

<Slider.MarkerGroup>
  <Slider.Marker value={0} />
  <Slider.Marker value={50} />
</Slider.MarkerGroup>

but this might be better if you don't need to customize the marker:

<Slider.Marks marks={[0, 50]} />

Examples

Sizes

Use the size prop to change the size of the slider.

Variants

Use the variant prop to change the visual style of the slider.

Colors

Use the colorPalette prop to change the color of the slider.

Label

Use the label prop to add a label to the slider.

Range Slider

Set the value or defaultValue prop to an array to create a range slider.

Prevent Overlap

Use the minStepsBetweenThumbs prop to avoid thumbs with the same value.

Customization

Here's an example of customizing the thumb with custom icon and background.

Value Text

Use the Slider.ValueText component to show the current value of the slider.

Controlled

Use the value and onValueChange props to control the value of the slider.

Store

An alternative way to control the slider is to use the RootProvider component and the useSlider store hook.

This way you can access the slider state and methods from outside the slider.

Hook Form

Here's an example of how to integrate a slider with react-hook-form.

Disabled

Use the disabled prop to disable the slider.

Change End

Use the onValueChangeEnd prop to listen to the end of the slider change.

Steps

Use the step prop to set the step value of the slider.

Thumb Alignment

Use the thumbAlignment and thumbSize prop to align the thumb within the track. By default, the thumb is aligned to the start of the track.

Marks

Use the marks prop to display marks on the slider.

You can also add labels to the marks using the marks prop.

Vertical

Use the orientation prop to change the orientation of the slider.

Vertical with Marks

Here's an example of a vertical slider with marks.

Dragging Indicator

Render the Slider.DraggingIndicator component to show an indicator or tooltip when dragging the thumb.

Closed Component

If you prefer a closed component composition, check out the snippet below.

import { Slider as ChakraSlider, HStack } from "@chakra-ui/react"
import * as React from "react"

export interface SliderProps extends ChakraSlider.RootProps {
  marks?: Array<number | { value: number; label: React.ReactNode }>
  label?: React.ReactNode
  showValue?: boolean
}

export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
  function Slider(props, ref) {
    const { label, showValue, marks, ...rest } = props
    return (
      <ChakraSlider.Root ref={ref} thumbAlignment="center" {...rest}>
        {label && !showValue && (
          <ChakraSlider.Label>{label}</ChakraSlider.Label>
        )}
        {label && showValue && (
          <HStack justify="space-between">
            <ChakraSlider.Label>{label}</ChakraSlider.Label>
            <ChakraSlider.ValueText />
          </HStack>
        )}
        <ChakraSlider.Control>
          <ChakraSlider.Track>
            <ChakraSlider.Range />
          </ChakraSlider.Track>
          <ChakraSlider.Thumbs />
          <ChakraSlider.Marks marks={marks} />
        </ChakraSlider.Control>
      </ChakraSlider.Root>
    )
  },
)

If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add slider

Props

Explorer

Explore the Slider component parts interactively. Click on parts in the sidebar to highlight them in the preview.