HueSlider

HueSliderは、ユーザーが色相を選択するために使用されるコンポーネントです。

<HueSlider.Root defaultValue={180} />

使い方

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

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

import { HueSlider } from "@workspaces/ui"

<HueSlider.Root />

サイズを変更する

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

デフォルトの値を設定する

デフォルトの値を設定する場合は、defaultValueに値を設定します。

<HueSlider.Root defaultValue={270} />

最小・最大値を設定する

最小・最大値を設定する場合は、minまたはmaxに数値を設定します。

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

方向を変更する

方向を変更する場合は、orientationに"vertical"または"horizontal"を設定します。デフォルトは、"horizontal"が設定されています。

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

形を変更する

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

ステップ値を設定する

ステップ値を設定する場合は、stepに値を設定します。

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

無効にする

無効にする場合は、disabledをtrueに設定します。

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

読み取り専用にする

読み取り専用にする場合は、readOnlyを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>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

開始と終了のイベントをハンドルする

開始と終了のイベントをハンドルする場合は、onChangeStartや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>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

制御する

const [value, setValue] = useState(180)

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

HueSlider.Root

Prop	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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.

アクセシビリティ

HueSliderは、アクセシビリティに関してWAI-ARIA - Slider Patternに従います。

キー	説明	状態
`ArrowRight`	`step`の値に基づいて値を増加します。	-
`ArrowLeft`	`step`の値に基づいて値を減少します。	-
`ArrowUp`	`step`の値に基づいて値を増加します。	-
`ArrowDown`	`step`の値に基づいて値を減少します。	-
`Home`	`min`の値を設定します。	-
`End`	`max`の値を設定します。	-
`PageUp`	`min`と`max`の値に基づいて値を増加します。	-
`PageDown`	`min`と`max`の値に基づいて値を減少します。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`HueSlider.Thumb`	`role="slider"`	スライダーであることを示します。
	`aria-label`	`"スライダーのつまみ"`を設定します。
	`aria-labelledby`	関連する`HueSlider.Root`の`id`を設定します。
	`aria-orientation`	`orientation`の値に基づいて`"horizontal"`または`"vertical"`を設定します。デフォルトは`"horizontal"`です。
	`aria-valuemin`	`min`の値を設定します。デフォルトは`0`です。
	`aria-valuemax`	`max`の値を設定します。デフォルトは`360`です。
	`aria-valuenow`	現在の値を設定します。
	`aria-valuetext`	`"18°, 赤"`のように、現在の値を設定します。
	`aria-describedby`	`HueSlider.Thumb`が`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。
`SliderInput`	`type="hidden"`	要素をアクセシビリティツリーから除外します。
	`aria-describedby`	`HueSlider.Root`が`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。

類似のコンポーネント

SaturationSliderは、ユーザーが色の彩度を選択するために使用されるコンポーネントです。

AlphaSliderは、ユーザーが色の透明度を選択するために使用されるコンポーネントです。

Sliderは、ユーザーが値の範囲から選択するために使用されるコンポーネントです。

ColorSelectorは、ユーザーが色を選択するために使用されるコンポーネントです。

ColorPickerは、ユーザーが色を選択したり任意の色の値を入力するために使用されるコンポーネントです。

使用しているコンポーネント・フック

Sliderは、ユーザーが値の範囲から選択するために使用されるコンポーネントです。

useValueは、useBreakpointValueとuseColorModeValueを組み合わせたカスタムフックです。

使用されているコンポーネント・フック

AlphaSliderは、ユーザーが色の透明度を選択するために使用されるコンポーネントです。

ColorSelectorは、ユーザーが色を選択するために使用されるコンポーネントです。

SaturationSliderは、ユーザーが色の彩度を選択するために使用されるコンポーネントです。

HueSlider

使い方

サイズを変更する

デフォルトの値を設定する

最小・最大値を設定する

方向を変更する

形を変更する

ステップ値を設定する

無効にする

読み取り専用にする

ツールチップを表示する

開始と終了のイベントをハンドルする

制御する

Props

HueSlider.Root

HueSlider.Overlay

HueSlider.Thumb

HueSlider.Track

アクセシビリティ

キーボード操作

ARIAロールと属性

類似のコンポーネント

SaturationSlider

AlphaSlider

Slider

ColorSelector

ColorPicker

使用しているコンポーネント・フック

Slider

useValue

使用されているコンポーネント・フック

AlphaSlider

ColorSelector

SaturationSlider

HueSlider.Root

HueSlider.Overlay

HueSlider.Thumb

HueSlider.Track