スライダーSliderExperimental
指定範囲から値を選ぶ入力コンポーネントです。
プレビュー
状態とバリエーション
現在値の表示
ラベル横に現在値を置くと、ドラッグ中も値を確認できます。
段階ラベル
数値を意味のある段階名へ対応させる時に使います。
無効化
操作できない理由はツールチップと補足文で伝えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | number | - | 外部から制御する値です。 |
| defaultValue | number | - | 初期値です。 |
| onValueChange | (value: number) => void | - | 値が変わった時に呼ばれます。 |
| min | number | 0 | 選択できる最小値です。 |
| max | number | 100 | 選択できる最大値です。 |
| step | number | 1 | 増減の単位です。 |
| disabled | boolean | false | 操作できない状態にします。理由はツールチップで補足します。 |
使い方
import * as React from "react";
import { FormControl, FormGroup, FormLabel, HStack, Slider } from "@gunjo/ui";
export function VolumeField() {
const [value, setValue] = React.useState(60);
return (
<FormGroup className="w-full max-w-sm">
<HStack justify="between">
<FormLabel htmlFor="volume">音量</FormLabel>
<span className="font-mono text-sm text-muted-foreground">{value}%</span>
</HStack>
<FormControl>
<Slider
id="volume"
value={value}
onValueChange={setValue}
min={0}
max={100}
step={1}
className="w-full"
/>
</FormControl>
</FormGroup>
);
}設計の判断
- 現在値の表示は、既定では出さない。資料は「Slider を使うなら常に現在値を数値で出す」を挙げています。GUNJO は
showValueを渡したときだけ出します。ラベルと値を上の行に並べる形が、置く場所によっては入らないからです。出さない選択をした画面でも、値そのものは近くのどこかに要ります。 - 読み上げの文言を差し替えられるようにした。
formatValueを渡すと、その結果がaria-valuetextに入ります。35000000ではなく通貨の形で読ませるためです（#193）。同じ関数がshowValueの表示にも使われるので、目で見る値と読み上げの値がずれません。 - 通った部分の塗りは、クラスではなく style で作る。つまみまでの塗りつぶしは、インラインの
linear-gradientで描いています。クラス名の一覧を変えずに済ませるためで、設計の元データとの差分検査がクラス名を見ているからです（#193）。valueを渡さない使い方でも塗りが追いつくように、部品の中で最後の値を覚えています。2つのつまみで範囲を選ぶ形は、この部品ではなくRangeSliderが持ちます。
UIXHERO: スライダー（Slider）
使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。