---
title: Slider
description: "`Slider` is a component used for allowing users to select a value from a range."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/slider/slider.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/slider
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-slider--basic
---

```tsx
<Slider.Root defaultValue={50} />
```

## Usage

```tsx
import { Slider } from "@yamada-ui/react"
```

```tsx
import { Slider } from "@/components/ui"
```

```tsx
import { Slider } from "@workspaces/ui"
```

```tsx
<Slider.Root>
  <Slider.Track>
    <Slider.Range />
    <Slider.Thumb />
  </Slider.Track>
  <Slider.Marks />
</Slider.Root>
```

### Change Variant

```tsx
<VStack>
  <For each={["outline", "solid"]}>
    {(variant) => (
      <Slider.Root key={variant} variant={variant} defaultValue={50} />
    )}
  </For>
</VStack>
```

### Change Size

```tsx
<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size) => <Slider.Root key={size} size={size} defaultValue={50} />}
  </For>
</VStack>
```

### Change Color Scheme

```tsx
<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Slider.Root
        key={colorScheme}
        colorScheme={colorScheme}
        defaultValue={50}
      />
    )}
  </For>
</VStack>
```

### Set Default Value

To set a default value, set a number to `defaultValue`.

```tsx
<Slider.Root defaultValue={50} />
```

### Set Minimum and Maximum Values

To set minimum and maximum values, set a number to `min` or `max`.

```tsx
<Slider.Root defaultValue={50} min={0} max={200} />
```

### Enable Range Selection

To enable range selection, set an array to `defaultValue` or `value`.

```tsx
<Slider.Root defaultValue={[25, 75]} />
```

### Set Minimum Distance

To set the minimum distance between thumbs, set a number to `betweenThumbs`.

```tsx
<Slider.Root defaultValue={[25, 75]} betweenThumbs={25} />
```

### Change Orientation

To change the orientation, set `orientation` to `"horizontal"` or `"vertical"`. The default is `"horizontal"`.

```tsx
<Slider.Root defaultValue={50} orientation="vertical" h="xs" />
```

### Use Marks

To use marks, set an array to `marks`.

```tsx
const marks = useMemo(() => [25, 50, 75], [])

return (
  <VStack>
    <Slider.Root defaultValue={50} marks={marks} />

    <Slider.Root
      defaultValue={50}
      marks={[
        { value: 25, label: "25" },
        { value: 50, label: "50" },
        { value: 75, label: "75" },
      ]}
    />
  </VStack>
)
```

### Change Shape

```tsx
<VStack>
  <For each={["circle", "rounded", "square"]}>
    {(shape) => <Slider.Root key={shape} shape={shape} defaultValue={50} />}
  </For>
</VStack>
```

### Disable

To disable the slider, set `disabled` to `true`.

```tsx
<VStack>
  <For each={["outline", "solid"]}>
    {(variant) => (
      <Slider.Root key={variant} variant={variant} defaultValue={50} disabled />
    )}
  </For>
</VStack>
```

### Read-Only

To make read-only, set `readOnly` to `true`.

```tsx
<VStack>
  <For each={["outline", "solid"]}>
    {(variant) => (
      <Slider.Root key={variant} variant={variant} defaultValue={50} readOnly />
    )}
  </For>
</VStack>
```

### Display Tooltips

```tsx
const [value, setValue] = useState(50)

return (
  <Slider.Root value={value} onChange={setValue}>
    <Slider.Track>
      <Slider.Range />
      <Tooltip content={value}>
        <Slider.Thumb />
      </Tooltip>
    </Slider.Track>

    <Slider.Marks marks={[25, 50, 75]} />
  </Slider.Root>
)
```

### Handle Start and End Events

To handle start and end events, use `onChangeStart` or `onChangeEnd`.

```tsx
const [value, onChange] = useState(50)
const [startValue, onChangeStart] = useState(50)
const [endValue, onChangeEnd] = useState(50)

return (
  <VStack>
    <Text>
      Value: {value}, Start Value: {startValue}, End Value: {endValue}
    </Text>

    <Slider.Root
      value={value}
      onChange={onChange}
      onChangeStart={onChangeStart}
      onChangeEnd={onChangeEnd}
    />
  </VStack>
)
```

### Set Step Value

To set a step value, set a number to `step`.

```tsx
<Slider.Root defaultValue={50} step={10} />
```

### Customize Styling

```tsx
<Slider.Root
  defaultValue={50}
  trackFill="red.bg"
  rangeFill="red.bg"
  thumbFill="red"
  trackSize="5"
/>
```

```tsx
<Slider.Root defaultValue={50}>
  <Slider.Track>
    <Slider.Range />
    <Slider.Thumb>
      <AudioLinesIcon fontSize="sm" />
    </Slider.Thumb>
  </Slider.Track>
</Slider.Root>
```

### Control

```tsx
const [value, setValue] = useState(50)

return <Slider.Root value={value} onChange={setValue} />
```

## Props

### Slider.Root

| Prop               | Default        | Type                                                                                                                                                                        | Description                                                                                                                                                      |
| ------------------ | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as`               | -              | `As`                                                                                                                                                                        | The HTML element to render.                                                                                                                                      |
| `asChild`          | -              | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child.                                                                                                                       |
| `css`              | -              | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                                                                                                                                                  |
| `colorScheme`      | -              | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                                                                                                                                      |
| `size`             | `"md"`         | `"lg" \| "md" \| "sm" \| "xl" \| "xs"`                                                                                                                                      | The size of the component.                                                                                                                                       |
| `variant`          | `"outline"`    | `"outline" \| "solid"`                                                                                                                                                      | The variant of the component.                                                                                                                                    |
| `betweenThumbs`    | `0`            | `number`                                                                                                                                                                    | The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.                                                      |
| `defaultValue`     | -              | `Y`                                                                                                                                                                         | The initial value of the slider.                                                                                                                                 |
| `disabled`         | `false`        | `boolean`                                                                                                                                                                   | If `true`, the field will be disabled.                                                                                                                           |
| `getAriaValueText` | -              | `(value: number, index: number) => string \| undefined`                                                                                                                     | This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input. |
| `indicatorFill`    | -              | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...`           | The fill color of the indicator.                                                                                                                                 |
| `indicatorRounded` | -              | `"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...`                                                                | The rounded of the indicator.                                                                                                                                    |
| `inputProps`       | -              | `SliderInputProps`                                                                                                                                                          | Props for the input element.                                                                                                                                     |
| `invalid`          | `false`        | `boolean`                                                                                                                                                                   | If `true`, the field will be invalid.                                                                                                                            |
| `marks`            | -              | `SliderMarksProps["marks"]`                                                                                                                                                 | The marks to display on the slider.                                                                                                                              |
| `marksProps`       | -              | `Partial<SliderMarksProps>`                                                                                                                                                 | Props for the marks element.                                                                                                                                     |
| `max`              | `100`          | `number`                                                                                                                                                                    | The maximum allowed value of the slider. Cannot be less than min.                                                                                                |
| `min`              | `0`            | `number`                                                                                                                                                                    | The minimum allowed value of the slider. Cannot be greater than max.                                                                                             |
| `name`             | -              | `string`                                                                                                                                                                    | The name attribute of the hidden `input` field. This is particularly useful in forms.                                                                            |
| `onChange`         | -              | `(value: Y) => void`                                                                                                                                                        | Function called whenever the slider value changes.                                                                                                               |
| `onChangeEnd`      | -              | `(value: Y) => void`                                                                                                                                                        | Function called when the user is done selecting a new value.                                                                                                     |
| `onChangeStart`    | -              | `(value: Y) => void`                                                                                                                                                        | Function called when the user starts selecting a new value.                                                                                                      |
| `orientation`      | `"horizontal"` | `"horizontal" \| "vertical"`                                                                                                                                                | The orientation of the slider.                                                                                                                                   |
| `rangeFill`        | -              | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...`           | The fill color of the range.                                                                                                                                     |
| `rangeProps`       | -              | `SliderRangeProps`                                                                                                                                                          | Props for the range element.                                                                                                                                     |
| `readOnly`         | `false`        | `boolean`                                                                                                                                                                   | If `true`, the field will be readonly.                                                                                                                           |
| `required`         | `false`        | `boolean`                                                                                                                                                                   | If `true`, the field will be required.                                                                                                                           |
| `shape`            | `"circle"`     | `"circle" \| "rounded" \| "square"`                                                                                                                                         | The shape of the thumb.                                                                                                                                          |
| `step`             | `1`            | `number`                                                                                                                                                                    | The step in which increments or decrements have to be made.                                                                                                      |
| `thumbFill`        | -              | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...`           | The fill color of the thumb.                                                                                                                                     |
| `thumbProps`       | -              | `SliderThumbProps`                                                                                                                                                          | Props for the thumb element.                                                                                                                                     |
| `thumbRounded`     | -              | `"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...`                                                                | The rounded of the thumb.                                                                                                                                        |
| `thumbSize`        | -              | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` | The size of the thumb.                                                                                                                                           |
| `thumbStroke`      | -              | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...`           | The stroke color of the thumb.                                                                                                                                   |
| `trackFill`        | -              | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...`           | The fill color of the track.                                                                                                                                     |
| `trackProps`       | -              | `SliderTrackProps`                                                                                                                                                          | Props for the track element.                                                                                                                                     |
| `trackRounded`     | -              | `"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...`                                                                | The rounded of the track.                                                                                                                                        |
| `trackSize`        | -              | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` | The size of the track.                                                                                                                                           |
| `value`            | -              | `Y`                                                                                                                                                                         | The value of the slider.                                                                                                                                         |

### Slider.Mark

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `value`       | -       | `number`                                                                                                                  | The value of the mark.                     |
| `indicator`   | `true`  | `boolean`                                                                                                                 | Whether the mark is an indicator.          |

### Slider.Marks

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `marks`       | -       | `(number \| { label: ReactNode; value: number; indicator?: boolean })[]`                                                  | The marks to display on the slider.        |
| `indicator`   | `true`  | `boolean`                                                                                                                 | Whether the mark is an indicator.          |

### Slider.Range

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Slider.Thumb

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `index`       | -       | `number`                                                                                                                  | The index of the thumb.                    |

### Slider.Thumbs

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `index`       | -       | `number`                                                                                                                  | The index of the thumb.                    |

### Slider.Track

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## Accessibility

Currently, this section is being updated due to the migration of v2.