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"` The size of the component.
`variant`	-	`Exclude<keyof Required<Y>["variants"], "base">` 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` 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.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the slider.
`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.
`shape`	`"circle"`	`"circle" \| "rounded" \| "square"` The shape of the thumb.
`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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` 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

Currently, this section is being updated due to the migration of v2.