Slider
Sliderは、指定された範囲内から値を選択するための入力コントロールです。単一値の選択とレンジ（範囲）選択の両方をサポートしています。
Tooltip
Labels
3
Sizes
S/Rsingle/range
Mode
Radix
Base
Playground
プレビュー
Dsingle50
Size
Color
Mode
Step
Direction
Tooltip
Options
<Slider
defaultValue={[50]}
/>Sizes
smトラック4px
サム14px
defaultトラック6px
サム18px
lgトラック8px
サム22px
| Size | トラック高さ | サム | プレビュー |
|---|---|---|---|
sm | 4px | 14px | |
default | 6px | 18px | |
lg | 8px | 22px |
Features
Range
defaultValueに2つの値を渡すことで、レンジスライダーとして動作します。
<Slider defaultValue={[25, 75]} />With Value
制御モードで値を表示するパターンです。
50
const [value, setValue] = useState([50])
<div className="space-y-4">
<div className="text-center">
<span className="text-2xl font-bold text-foreground tabular-nums">{value[0]}</span>
</div>
<Slider value={value} onValueChange={setValue} />
</div>States
Default
Disabled
<Slider defaultValue={[50]} />
<Slider defaultValue={[50]} disabled />API
Props
valueundefinednumber[]制御モードでの値（配列）
defaultValueundefinednumber[]非制御モードでの初期値（配列）
onValueChangeundefined(value: number[]) => void値変更時のコールバック（ドラッグ中も発火）
onValueCommitundefined(value: number[]) => voidドラッグ完了時のコールバック
color"default""default" | "primary"レンジとサムの色
size"default""sm" | "default" | "lg"スライダーのサイズ
min0number最小値
max100number最大値
step1numberステップ値
minStepsBetweenThumbs0numberレンジモードでのサム間の最小ステップ数
showTooltip"never""auto" | "always" | "never"ツールチップ表示モード。autoはホバー/ドラッグ時に表示
formatLabelundefined(value: number) => stringツールチップの値フォーマット関数
startContentundefinedReactNodeスライダーの左側に表示するコンテンツ（アイコン、ラベル等）
endContentundefinedReactNodeスライダーの右側に表示するコンテンツ
disabledfalseboolean無効状態
orientation"horizontal""horizontal" | "vertical"表示方向
invertedfalseboolean値の方向を反転
nameundefinedstringフォームのname属性
| Name | Type | Default | Description |
|---|---|---|---|
value | number[] | undefined | 制御モードでの値（配列） |
defaultValue | number[] | undefined | 非制御モードでの初期値（配列） |
onValueChange | (value: number[]) => void | undefined | 値変更時のコールバック（ドラッグ中も発火） |
onValueCommit | (value: number[]) => void | undefined | ドラッグ完了時のコールバック |
color | "default" | "primary" | "default" | レンジとサムの色 |
size | "sm" | "default" | "lg" | "default" | スライダーのサイズ |
min | number | 0 | 最小値 |
max | number | 100 | 最大値 |
step | number | 1 | ステップ値 |
minStepsBetweenThumbs | number | 0 | レンジモードでのサム間の最小ステップ数 |
showTooltip | "auto" | "always" | "never" | "never" | ツールチップ表示モード。autoはホバー/ドラッグ時に表示 |
formatLabel | (value: number) => string | undefined | ツールチップの値フォーマット関数 |
startContent | ReactNode | undefined | スライダーの左側に表示するコンテンツ（アイコン、ラベル等） |
endContent | ReactNode | undefined | スライダーの右側に表示するコンテンツ |
disabled | boolean | false | 無効状態 |
orientation | "horizontal" | "vertical" | "horizontal" | 表示方向 |
inverted | boolean | false | 値の方向を反転 |
name | string | undefined | フォームのname属性 |
Customization
startContent / endContent にReactNodeを渡して、スタイルを自由にカスタマイズできます。
アイコン付き
startContent={<VolumeOff />}
endContent={<Volume2 />}スタイル付きラベル
$0$100
startContent={<span className="text-xs font-mono font-bold text-primary">$0</span>}
endContent={<span className="text-xs font-mono font-bold text-primary">$100</span>}アイコン + ツールチップ
<Slider
showTooltip="always"
formatLabel={(v) => `${v}%`}
startContent={<Sun />}
endContent={<Sun />}
/>Tip：startContent / endContent はReactNodeなので、文字列・アイコン・カスタムコンポーネントなど何でも渡せます。フォントサイズはSliderのsizeに合わせて自動調整されます。
Anatomy
1
60
2
3
050100
Track height
6pxThumb size
18px1
Track
スライダー全体の範囲
2
Range
選択された値の範囲
3
Thumb
ドラッグ可能なつまみ
Best Practices
✓
推奨
- ✓現在の値を近くに表示する
- ✓適切なstep値を設定する
- ✓範囲選択にはレンジモードを使用する
- ✓min/maxの範囲を明確にする
✕
避けるべき
- ✗正確な値の入力にはInputを使用する
- ✗極端に小さいstep値を避ける
- ✗値の表示なしで使用しない
- ✗モバイルで幅が狭すぎるスライダーを避ける
Accessibility
キーボード操作
← →1ステップ増減
↑ ↓1ステップ増減
Home最小値に移動
End最大値に移動
ARIA属性
role="slider"自動付与aria-valuemin/max/now自動管理- フォーカスインジケーター
- タッチ操作対応