--- 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 ``` ## Usage ```tsx import { SaturationSlider } from "@yamada-ui/react" ``` ```tsx import { SaturationSlider } from "@/components/ui" ``` ```tsx import { SaturationSlider } from "@workspaces/ui" ``` ```tsx ``` ### Change Size ```tsx {(size, index) => ( )} ``` ### Set Default Value To set a default value, set a value to `defaultValue`. ```tsx ``` ### Change Shape ```tsx {(shape, index) => ( )} ``` ### Set Step Value To set a step value, set a value to `step`. ```tsx ``` ### Disable To disable, set `disabled` to `true`. ```tsx ``` ### Read-Only To make read-only, set `readOnly` to `true`. ```tsx ``` ### Display Tooltip ```tsx const [value, setValue] = useState([120, 0.33, 0.33]) return ( ) ``` ### 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 ( Value: {JSON.stringify(value)}, Start Value: {JSON.stringify(startValue)}, End Value: {JSON.stringify(endValue)} ) ``` ### Control ```tsx const [value, setValue] = useState([120, 0.33, 0.33]) return ``` ## Uses Components & Hooks ## Used By Components & Hooks ## 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. | | `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 The `SaturationSlider` follows the [WAI-ARIA - Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) for accessibility. ### Keyboard Navigation | Key | Description | State | | ------------ | ----------------------------------------------- | ----- | | `ArrowRight` | Increases saturation based on the `step` value. | - | | `ArrowLeft` | Decreases saturation based on the `step` value. | - | | `ArrowUp` | Increases brightness based on the `step` value. | - | | `ArrowDown` | Decreases brightness based on the `step` value. | - | ### ARIA Roles and Attributes | Component | Role and Attributes | Usage | | ------------------------ | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `SaturationSlider.Thumb` | `role="slider"` | Indicates that this is a slider. | | | `aria-label` | Sets `"Saturation and brightness thumb"`. | | | `aria-labelledby` | Sets the `id` of the related `SaturationSlider.Root`. | | | `aria-roledescription` | Sets `"2D slider"`. | | | `aria-valuemin` | Sets `0`. | | | `aria-valuemax` | Sets `100`. | | | `aria-valuenow` | Sets the current value. | | | `aria-valuetext` | Sets the current value, such as `"Saturation 18%, Brightness 18%"`. | | | `aria-readonly` | Set to `"true"` if `readOnly` is set. | | | `aria-disabled` | Set to `"true"` if `disabled` is set. | | | `aria-invalid` | Set to `"true"` if `invalid` is set. | | | `aria-required` | Set to `"true"` if `required` is set. | | | `aria-describedby` | If `SaturationSlider.Root` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`. | | `input` | `aria-hidden` | Excludes the element from the accessibility tree. | | | `aria-readonly` | Set to `"true"` if `readOnly` is set. | | | `aria-disabled` | Set to `"true"` if `disabled` is set. | | | `aria-invalid` | Set to `"true"` if `invalid` is set. | | | `aria-required` | Set to `"true"` if `required` is set. | | | `aria-describedby` | If `SaturationSlider.Root` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`. |