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
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。