數值控制
數字一樣會變，操作方式卻不能混在一起。
預算需要精確輸入；音量適合快速拖曳；服務滿意度則是主觀評分。先說清楚數字的意義，再決定控制項。
選型流程
先判斷數字是資料、範圍，還是感受。
- 需要輸入一個精確數字嗎？是：先用 Number Input；有固定小步進時考慮 Spinbutton。
- 只是在範圍內快速調整嗎？單一值用 Slider；同時設定兩端時用 Range Slider。
- 這個數字代表主觀評價嗎？是：使用 Rating，並寫清楚是否能修改或取消。
- 只是加減少量件數嗎？是：使用 Stepper Control，處理 0 與庫存上限。
比較表
看「數字的任務」，不要只看有沒有加減按鈕。
點選元件名稱可查看完整介紹、可操作 Demo、AI Prompt 與驗收清單。
| 比較面向 | Number Input｜數字輸入欄 | Spinbutton｜數值微調器 | Slider｜滑桿 | Range Slider｜範圍滑桿 | Rating｜評分控制 | Stepper Control｜數量步進控制 |
|---|---|---|---|---|---|---|
| 使用者要完成的事 | 輸入並儲存精確數字 | 以固定步進微調精確數字 | 快速找一個單一值 | 設定最低與最高區間 | 表達主觀感受 | 增加或減少少量件數 |
| 精確輸入 | 必要 | 可直接輸入 | 通常不適合單獨承擔 | 建議另提供數字輸入 | 不需要 | 通常不需要 |
| 調整方式 | 鍵盤、貼上、數字鍵盤 | 上下控制、方向鍵、輸入 | 拖曳、點按、方向鍵 | 拖曳兩端、方向鍵 | 點選等級、鍵盤 | 加減按鈕 |
| 典型情境 | 預算、金額、百分比 | 每組人數、重複次數 | 音量、透明度、偏好程度 | 價格、預算、日期篩選 | 服務滿意度、內容評價 | 購物車、同行人數 |
| 不要拿來做 | 用拖曳猜一個必須精確的值 | 調整數十萬的大範圍金額 | 只有位置、沒有可見數字 | 只靠兩個拇指位置猜範圍 | 客觀的金額或數量 | 需要貼上或輸入大數字 |
| 最常漏掉的事 | 單位、格式、範圍與錯誤文字 | 步進與最小／最大邊界 | 目前值、端點與手機觸控目標 | 兩端數字、不可交叉與精確替代 | 文字意義、修改與取消規則 | 按鈕名稱、0 與庫存上限 |
這組結論
「把預算拖到差不多」不等於可以提交預算。
Range Slider 很適合先縮小篩選範圍；真正要保存的金額，仍需要清楚的 Number Input 與範圍驗證。星等也不是精確數字，它需要說明目前感受與修改方式。
操作 Range Slider Demo →