---
id: slider
category: form
title: Slider
package: '@chakra-ui/slider'
description:
  'The Slider is used to allow users to make selections from a range of values.'
---

## Import

Chakra UI exports 5 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.
- **`SliderMark`**: The label or mark that shows names for specific slider
  values

```js
import {
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
  SliderMark,
} from '@chakra-ui/react'
```

## Usage

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.

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

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

### Changing the slider color scheme

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

### Changing the slider orientation

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

### Customizing the Slider

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

```jsx
<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>
```

### Discrete Sliders

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

```jsx
<Slider defaultValue={60} min={0} max={300} step={30}>
  <SliderTrack bg='red.100'>
    <SliderFilledTrack bg='tomato' />
  </SliderTrack>
  <SliderThumb boxSize={6} />
</Slider>
```

### Slider with custom labels and marks

You can have custom labels and marks by using `SliderMark` component

```jsx
function SliderMarkExample() {
  const [sliderValue, setSliderValue] = useState(50)

  const labelStyles = {
    mt: '2',
    ml: '-2.5',
    fontSize: 'sm',
  }

  return (
    <Box p={4} pt={6}>
      <Slider aria-label='slider-ex-6' onChange={(val) => setSliderValue(val)}>
        <SliderMark value={25} {...labelStyles}>
          25%
        </SliderMark>
        <SliderMark value={50} {...labelStyles}>
          50%
        </SliderMark>
        <SliderMark value={75} {...labelStyles}>
          75%
        </SliderMark>
        <SliderMark
          value={sliderValue}
          textAlign='center'
          bg='blue.500'
          color='white'
          mt='-10'
          ml='-5'
          w='12'
        >
          {sliderValue}%
        </SliderMark>
        <SliderTrack>
          <SliderFilledTrack />
        </SliderTrack>
        <SliderThumb />
      </Slider>
    </Box>
  )
}
```

And you can also use `Tooltip` with `SliderThumb`

```jsx
function SliderThumbWithTooltip() {
  const [sliderValue, setSliderValue] = React.useState(5)
  const [showTooltip, setShowTooltip] = React.useState(false)
  return (
    <Slider
      id='slider'
      defaultValue={5}
      min={0}
      max={100}
      colorScheme='teal'
      onChange={(v) => setSliderValue(v)}
      onMouseEnter={() => setShowTooltip(true)}
      onMouseLeave={() => setShowTooltip(false)}
    >
      <SliderMark value={25} mt='1' ml='-2.5' fontSize='sm'>
        25%
      </SliderMark>
      <SliderMark value={50} mt='1' ml='-2.5' fontSize='sm'>
        50%
      </SliderMark>
      <SliderMark value={75} mt='1' ml='-2.5' fontSize='sm'>
        75%
      </SliderMark>
      <SliderTrack>
        <SliderFilledTrack />
      </SliderTrack>
      <Tooltip
        hasArrow
        bg='teal.500'
        color='white'
        placement='top'
        isOpen={showTooltip}
        label={`${sliderValue}%`}
      >
        <SliderThumb />
      </Tooltip>
    </Slider>
  )
}
```

### 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.

```jsx live=false
<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.

```jsx live=false
<Slider aria-label='slider-ex-5' value={value} focusThumbOnChange={false}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
```

### useSlider

The `useSlider` hook is exported with state and focus management logic for use
in creating tailor-made slider component for your application. Read more about
the `useSlider` hook [here](/docs/styled-system/component-hooks/use-slider).