近期收到 Material Design 對 component 的更新訊息，趁此機會重新審視組件的使用方式。這次主要來看 Sliders。

使用方式

Sliders 組件讓使用者在範圍內的值做選取。可用在調整音量,亮度或調整圖片濾鏡等場景。 Sliders 可以在兩端點使用 icon 來表示數值或相對的關係。使用者可以透過和 icon 互動改變 Slider 的值，像是調整音量。

即時效果

使用 Sliders 改變值是立即性的，讓使用者調整 slider 達到選取值的目的。Sliders 不應該在使用者回饋上有任何的延遲。

當前狀態

Sliders 會直接反應當前值的狀態。

如下圖，上方是連續的 slider。下方式離散的 slider。

Sliders 值

可編輯的數值

可調整的 Slider 值讓使用者能精確的選取需要的數字。

透過選取點選 Slider 按鈕拖曳改變值，或是使用輸入框直接輸入需要的值。使用者輸入後， Slider 按鈕要立即改變位置與使用者輸入的值相同。請注意輸入框不包含在 Slider 組件內，而是開發者需要自行開發的功能。研究發現輸入框有助於使用者選取需要的值。

值的順序

對於從左到右顯示的語言（例如英語），範圍的最小值顯示在左側，最大值顯示在右側。
對於從右到左的語言（例如阿拉伯語），應該顛倒值的位置，將最大值放在左邊，將最小值放在右邊。

Sliders 種類

連續 Sliders

連續 Sliders 讓使用者在主觀範圍內選擇。不需要將值標示出來。

離散 Sliders

離散 Sliders 可通過按鈕來調整為特定值。可以用刻度的方式讓按鈕吸附對應的值。

主題客製化

可依據主題客製化所需的 Slider 如下圖。

目前專案中還沒有適合使用 Slider 的時機點，若往後有機會可以嘗試加入此組件。

參考資料

• Material Design - Sliders