---
title: SaturationSlider
description: "`SaturationSlider`は、ユーザーが色の彩度を選択するために使用されるコンポーネントです。"
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
```
## 使い方
```tsx
import { SaturationSlider } from "@yamada-ui/react"
```
```tsx
import { SaturationSlider } from "@/components/ui"
```
```tsx
import { SaturationSlider } from "@workspaces/ui"
```
```tsx
```
### サイズを変更する
```tsx
{(size, index) => (
)}
```
### デフォルトの値を設定する
デフォルトの値を設定する場合は、`defaultValue`に値を設定します。
```tsx
```
### 形を変更する
```tsx
{(shape, index) => (
)}
```
### ステップ値を設定する
ステップ値を設定する場合は、`step`に値を設定します。
```tsx
```
### 無効にする
無効にする場合は、`disabled`を`true`に設定します。
```tsx
```
### 読み取り専用にする
読み取り専用にする場合は、`readOnly`を`true`に設定します。
```tsx
```
### ツールチップを表示する
```tsx
const [value, setValue] = useState([120, 0.33, 0.33])
return (
)
```
### 開始と終了のイベントをハンドルする
開始と終了のイベントをハンドルする場合は、`onChangeStart`や`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 (
Value: {JSON.stringify(value)}, Start Value: {JSON.stringify(startValue)},
End Value: {JSON.stringify(endValue)}
)
```
### 制御する
```tsx
const [value, setValue] = useState([120, 0.33, 0.33])
return
```
## 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. |
## アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。