SaturationSlider
SaturationSlider is a component used to allow the user to select a color saturation.
<SaturationSlider.Root maxW="sm" />
Usage
import { SaturationSlider } from "@yamada-ui/react"
import { SaturationSlider } from "@/components/ui"
import { SaturationSlider } from "@workspaces/ui"
<SaturationSlider.Root />
Change Size
<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.
<SaturationSlider.Root defaultValue={[120, 0.33, 0.33]} maxW="sm" />
Change Shape
<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.
<SaturationSlider.Root step={0.1} maxW="sm" />
Disable
To disable, set disabled to true.
<SaturationSlider.Root disabled maxW="sm" />
Read-Only
To make read-only, set readOnly to true.
<SaturationSlider.Root readOnly maxW="sm" />
Display Tooltip
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>
)
If you use this code, you need to add
"use client" to the top of the file.Handle Start and End Events
To handle start and end events, use onChangeStart or onChangeEnd.
Value: [120,0.33,0.33], Start Value: [120,0.33,0.33], End Value: [120,0.33,0.33]
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>
)
If you use this code, you need to add
"use client" to the top of the file.Control
const [value, setValue] = useState([120, 0.33, 0.33])
return <SaturationSlider.Root value={value} onChange={setValue} maxW="sm" />
If you use this code, you need to add
"use client" to the top of the file.Props
Accessibility
The SaturationSlider follows the WAI-ARIA - Slider Pattern 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. |