Components > Slider
Slider
Slider透過水平拖曳滑鈕來直覺選取特定數值的互動元件,核心任務是將抽象的數值轉化為具體的物理空間感,適合用於用戶不需要精確輸入到個位數、而是追求快速調整與視覺反饋的場景(如:音量、亮度、預算區間篩選)。
SYNCROBOTICORBIELOCALMIND
01. Default States
Default State
Active (Dragging)
Hover State
Focused State
Error / Invalid
Disabled State
Light Surface Context
Active (Dragging)
Hover State (Deep)
Focused State (Deep)
Error / Invalid (Deep)
Disabled State
02. Slider Types
Discrete (Ticks)
Range (Dual Thumb)
Discrete (Ticks)
Range (Dual Thumb)
03. Size
MD - 6px Track / 18px Thumb
SM - 4px Track / 14px Thumb
MD - 6px Track / 18px Thumb
SM - 4px Track / 14px Thumb
04. Floating Tooltip
50%
50%