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は、アクセシビリティに関して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-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" | プレゼンテーションであることを示します。 | |
input | 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"を設定します。 |
類似のコンポーネント
AlphaSlider
AlphaSliderは、ユーザーが色の透明度を選択するために使用されるコンポーネントです。
HueSlider
HueSliderは、ユーザーが色相を選択するために使用されるコンポーネントです。
SaturationSlider
SaturationSliderは、ユーザーが色の彩度を選択するために使用されるコンポーネントです。
Checkbox
Checkboxは、ユーザーが複数の選択肢の中から複数の値を選択するために使用されるコンポーネントです。
ColorSelector
ColorSelectorは、ユーザーが色を選択するために使用されるコンポーネントです。
Dropzone
Dropzoneは、ファイルをドラッグアンドドロップでアップロードするために使用されるコンポーネントです。
Editable
Editableは、インラインで編集可能なテキスト入力を取得するために使用されるコンポーネントです。
Field
Fieldは、フォーム要素に、ラベル、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。