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" />

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

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"` 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.