Slider 滑塊

在固定範圍內拖拉取值。使用 Element Plus 的 el-slider。

設計準則

• 適合「大概值」且範圍固定的場景(發送比例、相似度門檻);要精確輸入的數值用 InputNumber
• 需要精確又想保留拖拉手感,用 show-input 滑塊 + 數字框並存
• 目前值一定要看得到:開 show-input、加刻度 marks,或在旁邊放文字顯示目前值
• 區間篩選(年齡層、價格帶)用 range
• 檔位有業務意義時用 step + marks 標出來

基本用法

loading

搭配數字框

拖拉調大概、打字調精確,兩全:

loading

搭配數字框的尺寸

size 同時作用於滑塊與數字框,跟著同一張表單的元件尺寸走:

loading

區間

篩選年齡層、價格帶:

loading

垂直模式

空間窄、且語意本來就是縱向(音量、不透明度)才用;必須指定 height:

loading

顯示標記

檔位有意義時,用 marks 直接標在軌道上;重要門檻可用物件寫法加強樣式:

loading

限制值

用 min / max 把可選範圍縮到業務允許的區間,界線的理由用文字寫出來:

loading

Do / Don't

✅ Do	❌ Don't
大概值、範圍固定才用 slider	輸入精確金額用 slider
目前值隨時看得到	拖完不知道停在多少
檔位有意義就標 marks	光禿禿一條軌道

給工程師

完整 API 見 Element Plus Slider 文件。 本站規範優先於 EP 文件中的視覺建議。