KARAKURIDESIGN SYSTEM

Slider

Sliderは、指定された範囲内から値を選択するための入力コントロールです。 単一値の選択とレンジ（範囲）選択の両方をサポートしています。

Tooltip
Labels
3
Sizes
S/R
Mode
Radix
Base

Playground

Preview
Dsingle
Size
Color
Mode
Step
Direction
Tooltip
Options
<Slider
  defaultValue={[50]}
/>

Sizes

sm
トラック4px
サム14px
default
トラック6px
サム18px
lg
トラック8px
サム22px

Features

Range

defaultValueに2つの値を渡すことで、レンジスライダーとして動作します。

With Value

制御モードで値を表示するパターンです。

50

States

Default
Disabled

API

Props

valueundefined
number[]

制御モードでの値（配列）

defaultValueundefined
number[]

非制御モードでの初期値（配列）

onValueChangeundefined
(value: number[]) => void

値変更時のコールバック（ドラッグ中も発火）

onValueCommitundefined
(value: number[]) => void

ドラッグ完了時のコールバック

color"default"
"default" | "primary"

レンジとサムの色

size"default"
"sm" | "default" | "lg"

スライダーのサイズ

min0
number

最小値

max100
number

最大値

step1
number

ステップ値

minStepsBetweenThumbs0
number

レンジモードでのサム間の最小ステップ数

showTooltip"never"
"auto" | "always" | "never"

ツールチップ表示モード。autoはホバー/ドラッグ時に表示

formatLabelundefined
(value: number) => string

ツールチップの値フォーマット関数

startContentundefined
ReactNode

スライダーの左側に表示するコンテンツ（アイコン、ラベル等）

endContentundefined
ReactNode

スライダーの右側に表示するコンテンツ

disabledfalse
boolean

無効States

orientation"horizontal"
"horizontal" | "vertical"

表示方向

invertedfalse
boolean

値の方向を反転

nameundefined
string

フォームの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に合わせて自動調整されます。