スライダーSliderExperimental
指定範囲から値を選ぶ入力コンポーネントです。
プレビュー
状態とバリエーション
現在値の表示
ラベル横に現在値を置くと、ドラッグ中も値を確認できます。
段階ラベル
数値を意味のある段階名へ対応させる時に使います。
無効化
操作できない理由はツールチップと補足文で伝えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | number | - | 外部から制御する値です。 |
| defaultValue | number | - | 初期値です。 |
| onValueChange | (value: number) => void | - | 値が変わった時に呼ばれます。 |
| min | number | 0 | 選択できる最小値です。 |
| max | number | 100 | 選択できる最大値です。 |
| step | number | 1 | 増減の単位です。 |
| disabled | boolean | false | 操作できない状態にします。理由はツールチップで補足します。 |
使い方
import { FormControl, FormGroup, FormLabel, HStack, Slider } from "@gunjo/ui";
<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>使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。