Slider 滑桿

概述

滑桿是一種允許使用者透過移動把手沿著水平軌道來選擇數值的元件。它提供直觀的方式,讓使用者可以選擇範圍或單一數值。

使用時機

滑桿常用於以下情境:

  • 需要使用者從連續數值範圍中選擇單一數值時。
  • 需要使用者從連續數值範圍中選擇區間時。
  • 需要使用者快速瀏覽大量選項時。

不適用於:

  • 數值範圍非常大 (例如1-1000) 時:當滑桿允許選擇的範圍非常大時,應避免使用滑桿,改用其他更適合的元件,例如數字輸入框。
  • 數值範圍非常小 (例如1-3) 時。
  • 需要使用者輸入複雜數值 (非數字) 時。

使用規範

當您取用滑桿進行設計時,應考慮以下原則:

  • 標籤:盡可能在滑桿旁邊提供標籤,清楚地描述可選數值的單位。
  • 數值範圍:確保滑桿的最小值和最大值反映實際的數值範圍。

設計範例

單一滑桿 (Single Slider)

單一滑桿由標籤和軌道上的把手組成。使用者可以直接拖曳把手來選擇範圍。

  1. 標籤 (Label):標示滑桿的用途或範圍單位。
  2. 拖曳把手 (Slider Thumb):在滑桿範圍內移動的指示器。
  3. 即時數值 (Current Value):顯示滑桿範圍內目前選定的數值。

區間滑桿 (Range Slider)

區間滑桿包含標籤和軌道上的兩個把手。使用者可以直接拖曳把手來設定範圍。

  1. 標籤 (Label):標示滑桿的用途或範圍單位。
  2. 即時數值 (Current Value):顯示滑桿範圍內目前拖曳的數值,滑桿兩側均需顯示即時數值。
  3. 拖曳把手 (Slider Thumb):在滑桿範圍內移動的指示器。
  4. 數值輸入框 (Data Input) (選擇性):用於指定滑桿範圍內選定值的輸入。
回頁首