---
title: SaturationSlider
description: "`SaturationSlider` is a component used to allow the user to select a color saturation."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/saturation-slider
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-saturationslider--basic
---

```tsx
<SaturationSlider.Root maxW="sm" />
```

## Usage

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

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

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

```tsx
<SaturationSlider.Root />
```

### Change Size

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

### Set Default Value

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

```tsx
<SaturationSlider.Root defaultValue={[120, 0.33, 0.33]} maxW="sm" />
```

### Change Shape

```tsx
<VStack>
  <For each={["circle", "rounded", "square"]}>
    {(shape, index) => (
      <SaturationSlider.Root
        key={index}
        defaultValue={[120, 0.33, 0.33]}
        shape={shape}
        maxW="sm"
      />
    )}
  </For>
</VStack>
```

### Set Step Value

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

```tsx
<SaturationSlider.Root step={0.1} maxW="sm" />
```

### Disable

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

```tsx
<SaturationSlider.Root disabled maxW="sm" />
```

### Read-Only

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

```tsx
<SaturationSlider.Root readOnly maxW="sm" />
```

### Display Tooltip

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

return (
  <SaturationSlider.Root value={value} onChange={setValue} maxW="sm">
    <SaturationSlider.Track>
      <Tooltip content={value}>
        <SaturationSlider.Thumb />
      </Tooltip>
    </SaturationSlider.Track>
  </SaturationSlider.Root>
)
```

### Handle Start and End Events

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

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

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

    <SaturationSlider.Root
      value={value}
      onChange={onChange}
      onChangeStart={onChangeStart}
      onChangeEnd={onChangeEnd}
      maxW="sm"
    />
  </VStack>
)
```

### Control

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

return <SaturationSlider.Root value={value} onChange={setValue} maxW="sm" />
```

## Props

### SaturationSlider.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.                                                                                                                                       |
| `defaultValue`     | `[0, 0, 1]` | `[number, number, number]`                                                                                                | The initial value of the saturation slider.                                                                                                                      |
| `disabled`         | `false`     | `boolean`                                                                                                                 | If `true`, the field will be disabled.                                                                                                                           |
| `getAriaValueText` | -           | `(value: [number, number, 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. |
| `id`               | -           | `string`                                                                                                                  | The base `id` to use for the slider.                                                                                                                             |
| `inputProps`       | -           | `HTMLStyledProps<"input">`                                                                                                | Props for the input element.                                                                                                                                     |
| `invalid`          | `false`     | `boolean`                                                                                                                 | If `true`, the field will be invalid.                                                                                                                            |
| `name`             | -           | `string`                                                                                                                  | The name attribute of the hidden `input` field. This is particularly useful in forms.                                                                            |
| `onChange`         | -           | `(value: [number, number, number]) => void`                                                                               | Function called whenever the saturation slider value changes.                                                                                                    |
| `onChangeEnd`      | -           | `(value: [number, number, number]) => void`                                                                               | Function called when the user is done selecting a new value.                                                                                                     |
| `onChangeStart`    | -           | `(value: [number, number, number]) => void`                                                                               | Function called when the user starts selecting a new value.                                                                                                      |
| `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`             | `0.01`      | `number`                                                                                                                  | The step in which increments or decrements have to be made.                                                                                                      |
| `thumbProps`       | -           | `SaturationSliderThumbProps`                                                                                              | Props for the thumb element.                                                                                                                                     |
| `trackProps`       | -           | `SaturationSliderTrackProps`                                                                                              | Props for the track element.                                                                                                                                     |
| `value`            | -           | `[number, number, number]`                                                                                                | The value of the saturation slider.                                                                                                                              |

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

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