HueSlider

HueSlider is a component used to allow the user to select a color hue.

<HueSlider.Root defaultValue={180} />

Usage

import { HueSlider } from "@yamada-ui/react"

import { HueSlider } from "@/components/ui"

import { HueSlider } from "@workspaces/ui"

<HueSlider.Root />

Change Size

<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => (
      <HueSlider.Root key={index} size={size} defaultValue={180} />
    )}
  </For>
</VStack>

Set Default Value

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

<HueSlider.Root defaultValue={270} />

Set Min and Max Values

To set minimum and maximum values, set numbers to min or max.

<HueSlider.Root defaultValue={300} min={270} max={360} />

Change Orientation

To change the orientation, set orientation to "vertical" or "horizontal". By default, "horizontal" is set.

<HueSlider.Root defaultValue={180} orientation="vertical" h="xs" />

Change Shape

<VStack>
  <For each={["circle", "rounded", "square"]}>
    {(shape, index) => (
      <HueSlider.Root key={index} defaultValue={180} shape={shape} />
    )}
  </For>
</VStack>

Set Step Value

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

<HueSlider.Root defaultValue={180} step={10} />

Disable

To disable, set disabled to true.

<HueSlider.Root defaultValue={180} disabled />

Read-Only

To make read-only, set readOnly to true.

<HueSlider.Root defaultValue={180} readOnly />

const [value, setValue] = useState(50)

return (
  <HueSlider.Root value={value} onChange={setValue}>
    <HueSlider.Track>
      <Tooltip content={value}>
        <HueSlider.Thumb />
      </Tooltip>

      <HueSlider.Overlay />
    </HueSlider.Track>
  </HueSlider.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: 180, Start Value: 180, End Value: 180

const [value, onChange] = useState(180)
const [startValue, onChangeStart] = useState(180)
const [endValue, onChangeEnd] = useState(180)

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

    <HueSlider.Root
      value={value}
      onChange={onChange}
      onChangeStart={onChangeStart}
      onChangeEnd={onChangeEnd}
    />
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Control

const [value, setValue] = useState(180)

return <HueSlider.Root value={value} onChange={setValue} />

If you use this code, you need to add "use client" to the top of the file.

Props

HueSlider.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.
`variant`	-	`"outline" \| "solid"` The variant of the component.
`defaultValue`	-	`number` The initial value of the slider.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`getAriaValueText`	-	`(value: number, index: 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.
`indicatorFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the indicator.
`indicatorRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the indicator.
`inputProps`	-	`SliderInputProps` Props for the input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`max`	`360`	`number` The maximum allowed value of the slider. Cannot be less than min.
`min`	`0`	`number` The minimum allowed value of the slider. Cannot be greater than max.
`name`	-	`string` The name attribute of the hidden `input` field. This is particularly useful in forms.
`onChange`	-	`(value: number) => void` Function called whenever the slider value changes.
`onChangeEnd`	-	`(value: number) => void` Function called when the user is done selecting a new value.
`onChangeStart`	-	`(value: number) => void` Function called when the user starts selecting a new value.
`overlayProps`	-	`HueSliderOverlayProps` Props for the overlay element.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`step`	`1`	`number` The step in which increments or decrements have to be made.
`thumbProps`	-	`HueSliderThumbProps` Props for the thumb element.
`thumbRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the thumb.
`thumbSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the thumb.
`thumbStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the thumb.
`trackProps`	-	`HueSliderTrackProps` Props for the track element.
`trackRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the track.
`trackSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the track.
`value`	-	`number` The value of the slider.

HueSlider.Overlay

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.
`layers`	-	`HTMLStyledProps[]` The layers used for the overlay element.

HueSlider.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.
`index`	-	`number` The index of the thumb.

HueSlider.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 HueSlider follows the WAI-ARIA - Slider Pattern for accessibility.

Key	Description	State
`ArrowRight`	Increases the value based on the `step` value.	-
`ArrowLeft`	Decreases the value based on the `step` value.	-
`ArrowUp`	Increases the value based on the `step` value.	-
`ArrowDown`	Decreases the value based on the `step` value.	-
`Home`	Sets the value to `min`.	-
`End`	Sets the value to `max`.	-
`PageUp`	Increases the value based on the `min` and `max` values.	-
`PageDown`	Decreases the value based on the `min` and `max` values.	-

ARIA Roles and Attributes

Component	Role and Attributes	Usage
`HueSlider.Thumb`	`role="slider"`	Indicates that this is a slider.
	`aria-label`	Sets `"Slider thumb"`.
	`aria-labelledby`	Sets the `id` of the associated `HueSlider.Root`.
	`aria-orientation`	Sets `"horizontal"` or `"vertical"` based on the `orientation` value. Default is `"horizontal"`.
	`aria-valuemin`	Sets the `min` value. Default is `0`.
	`aria-valuemax`	Sets the `max` value. Default is `360`.
	`aria-valuenow`	Sets the current value.
	`aria-valuetext`	Sets the current value, such as `"18°, Red"`.
	`aria-describedby`	If `HueSlider.Thumb` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
	`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.
`SliderInput`	`type="hidden"`	Excludes the element from the accessibility tree.
	`aria-describedby`	If `HueSlider.Root` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
	`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.

HueSlider

Usage

Change Size

Set Default Value

Set Min and Max Values

Change Orientation

Change Shape

Set Step Value

Disable

Read-Only

Display Tooltip

Handle Start and End Events

Control

Props

HueSlider.Root

HueSlider.Overlay

HueSlider.Thumb

HueSlider.Track

Accessibility

Keyboard Navigation

ARIA Roles and Attributes

HueSlider.Root

HueSlider.Overlay

HueSlider.Thumb

HueSlider.Track