Slider

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

<Slider.Root defaultValue={50} />

使い方

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

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

import { Slider } from "@workspaces/ui"

<Slider.Root>
  <Slider.Track>
    <Slider.Range />
    <Slider.Thumb />
  </Slider.Track>
  <Slider.Marks />
</Slider.Root>

バリアントを変更する

<VStack>
  <For each={["outline", "solid"]}>
    {(variant) => (
      <Slider.Root key={variant} variant={variant} defaultValue={50} />
    )}
  </For>
</VStack>

サイズを変更する

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

カラースキームを変更する

<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Slider.Root
        key={colorScheme}
        colorScheme={colorScheme}
        defaultValue={50}
      />
    )}
  </For>
</VStack>

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

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

<Slider.Root defaultValue={50} />

最小・最大値を設定する

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

<Slider.Root defaultValue={50} min={0} max={200} />

範囲選択を有効にする

範囲選択を有効にする場合は、defaultValueまたはvalueに配列を設定します。

<Slider.Root defaultValue={[25, 75]} />

最小間隔を設定する

最小間隔を設定する場合は、betweenThumbsに数値を設定します。

<Slider.Root defaultValue={[25, 75]} betweenThumbs={25} />

方向を変更する

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

<Slider.Root defaultValue={50} orientation="vertical" h="xs" />

マークを使う

マークを使う場合は、marksに配列を設定します。

const marks = useMemo(() => [25, 50, 75], [])

return (
  <VStack>
    <Slider.Root defaultValue={50} marks={marks} />

    <Slider.Root
      defaultValue={50}
      marks={[
        { value: 25, label: "25" },
        { value: 50, label: "50" },
        { value: 75, label: "75" },
      ]}
    />
  </VStack>
)

形を変更する

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

ステップ値を設定する

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

<Slider.Root defaultValue={50} step={10} />

無効にする

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

<VStack>
  <For each={["outline", "solid"]}>
    {(variant) => (
      <Slider.Root key={variant} variant={variant} defaultValue={50} disabled />
    )}
  </For>
</VStack>

読み取り専用にする

読み取り専用にする場合は、readOnlyをtrueに設定します。

<VStack>
  <For each={["outline", "solid"]}>
    {(variant) => (
      <Slider.Root key={variant} variant={variant} defaultValue={50} readOnly />
    )}
  </For>
</VStack>

ツールチップを表示する

const [value, setValue] = useState(50)

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

    <Slider.Marks marks={[25, 50, 75]} />
  </Slider.Root>
)

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

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

開始と終了のイベントをハンドルする場合は、onChangeStartやonChangeEndを使用します。

Value: 50, Start Value: 50, End Value: 50

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

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

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

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

スタイリングをカスタマイズする

<Slider.Root
  defaultValue={50}
  trackFill="red.bg"
  rangeFill="red.bg"
  thumbFill="red"
  trackSize="5"
/>

<Slider.Root defaultValue={50}>
  <Slider.Track>
    <Slider.Range />
    <Slider.Thumb>
      <AudioLinesIcon fontSize="sm" />
    </Slider.Thumb>
  </Slider.Track>
</Slider.Root>

制御する

const [value, setValue] = useState(50)

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

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

Props

Slider.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"`	`"outline" \| "solid"` The variant of the component.
`betweenThumbs`	`0`	`number` The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
`defaultValue`	-	`Y` 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.
`marks`	-	`SliderMarksProps["marks"]` The marks to display on the slider.
`marksProps`	-	`Partial<SliderMarksProps>` Props for the marks element.
`max`	`100`	`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: Y) => void` Function called whenever the slider value changes.
`onChangeEnd`	-	`(value: Y) => void` Function called when the user is done selecting a new value.
`onChangeStart`	-	`(value: Y) => void` Function called when the user starts selecting a new value.
`rangeFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the range.
`rangeProps`	-	`SliderRangeProps` Props for the range 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.
`thumbFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the thumb.
`thumbProps`	-	`SliderThumbProps` 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.
`trackFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the track.
`trackProps`	-	`SliderTrackProps` 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`	-	`Y` The value of the slider.

Slider.Mark

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.
`value`	-	`number` The value of the mark.
`indicator`	`true`	`boolean` Whether the mark is an indicator.

Slider.Marks

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.
`marks`	-	`(number \| { label: ReactNode; value: number; indicator?: boolean })[]` The marks to display on the slider.
`indicator`	`true`	`boolean` Whether the mark is an indicator.

Slider.Range

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.

Slider.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.

Slider.Thumbs

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.

Slider.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.

アクセシビリティ

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

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

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Slider.Thumb`	`role="slider"`	スライダーであることを示します。
	`aria-label`	`"スライダーのつまみ"`を設定します。
	`aria-labelledby`	関連する`Slider.Root`の`id`を設定します。
	`aria-orientation`	`orientation`の値に基づいて`"horizontal"`または`"vertical"`を設定します。デフォルトは`"horizontal"`です。
	`aria-valuemin`	`min`の値を設定します。デフォルトは`0`です。
	`aria-valuemax`	`max`の値を設定します。デフォルトは`100`です。
	`aria-valuenow`	現在の値を設定します。
	`aria-valuetext`	現在の値を設定します。
	`aria-describedby`	`Slider.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"`を設定します。
`Slider.Mark`	`aria-hidden`	要素をアクセシビリティツリーから除外します。
	`role="presentation"`	プレゼンテーションであることを示します。
`SliderInput`	`aria-hidden`	要素をアクセシビリティツリーから除外します。
	`aria-describedby`	`Slider.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は、ユーザーが色の彩度を選択するために使用されるコンポーネントです。

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

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

Textareaは、複数行のテキスト入力を取得するために使用されるコンポーネントです。

Switchは、オンとオフの状態を切り替えるために使用されるコンポーネントです。

SegmentedControlは、ユーザーが複数の選択肢の中から1つを選択するために使用されるコンポーネントです。

Radioは、ユーザーが複数の選択肢の中から1つの値を選択するために使用されるコンポーネントです。

Ratingは、ユーザーが評価を行うために使用させるコンポーネントです。

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

Fieldは、フォーム要素に、ラベル、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。

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

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

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

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

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