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%

05. Input Backup Field