跳至主要内容

Slider 控制項介紹

Slider 透過連續或範圍滑桿選擇數值。它會加入所在 Form 的欄位狀態、驗證與提交範圍。

1. 適用情境​

常見用途:

  • 百分比與門檻
  • 預算或價格範圍
  • 比精確輸入更強調相對位置的數值

2. 新增與設定​

  1. 把 Slider 加入 Form Section 的 Fields 區域。
  2. 設定穩定且唯一的 Field Key / Name,並與後端 DTO 屬性一致。
  3. 設定下列元件屬性,再視需要加入 Required、Help Text、Full row 與條件運算式。
  4. 在 Design Preview 檢查初始值與版面,並使用 Form Validate / Submit 驗證完整資料流程。

3. 主要屬性​

屬性作用
Min Value / Max Value限制允許的數量、長度或取值範圍。
Initial Value設定欄位使用的初始值、內容或格式。
Dual Slider Mode啟用或關閉此行為。
Initial Min / Max Value設定欄位使用的初始值、內容或格式。
Marks控制欄位在 Design Preview 與 Runtime 中的顯示方式。
Disable Slider啟用或關閉此行為。

Field Key、Required、Help Text、Full row、Visible When 等通用屬性由 Form 欄位契約提供;本表列出使用 Slider 時最需要注意的設定。

4. 表單值與後端契約​

提交值: 一般模式為數值,Dual Slider Mode 下為 [最小值, 最大值]。

65

[20, 80]

範例只說明資料形狀;API 仍應依業務 DTO 驗證型別、範圍與權限。

5. 驗證、條件與互動​

所有欄位都可使用 Required、Visible When、Disabled When、Required When、Dependencies 與 Clear When Hidden。條件運算式只控制互動,不取代後端權限與驗證。

元件能力: 支援 setValue,可由按鈕、Step 或其他動作寫入欄位值。

6. 使用建議​

設定建議: 前後端都要驗證最小值、最大值與精度;顯示刻度不能取代提交驗證。

返回 Form 總覽,瞭解版面、驗證、提交、草稿與後端協定。