Sliders - 滑塊

Sliders let users select from a range of values by moving the slider thumb.

Sliders are ideal components for adjusting settings that reflect intensity levels, such as volume, brightness, or color saturation.

Sliders may have icons on both ends of the bar that reflect the value intensity. Place the smallest value for the slider range on the left and the largest value on the right.

【翻譯】
滑塊允許用戶通過移動滑塊縮略圖從一系列值中進行選擇。
滑塊是用于調(diào)整反映強度級別（如音量含懊，亮度或色彩飽和度）的設置的理想組件燕鸽。
滑塊可以在條的兩端具有反映值強度的圖標。將滑塊范圍的最小值放在左側(cè)者甲，將最大值放在右側(cè)商佛。

Continuous sliders - 連續(xù)滑塊

Continuous sliders allow users to select a value along a subjective range. They do not require a specific value to make adjustments, although they may, in some instances, offer an editable numeric value.

【翻譯】
連續(xù)滑塊允許用戶沿主觀范圍選擇一個值闷愤。它們不需要特定的值來進行調(diào)整整葡，盡管在某些情況下，它們可以提供可編輯的數(shù)值讥脐。

Discrete sliders - 離散滑塊

Discrete sliders allow users to select a specific value from a range.

【翻譯】
離散滑塊允許用戶從范圍中選擇特定值遭居。

Continuous slider - 連續(xù)滑塊

Use continuous sliders for subjective settings that do not require a specific value for the user to make meaningful adjustments.

【翻譯】
對于不需要特定值的主觀設置啼器，使用連續(xù)滑塊進行有意義的調(diào)整。

Light - 亮色

Thumb on: Swatch 500, Opacity 100%
Track on: Swatch 500, Opacity 100%

Thumb off: #000000, Opacity 26%
Track off: #000000, Opacity 26%

Focused and Click Thumb off: #000000, Opacity 38%
Focused and Click Track off: #000000, Opacity 38%

Disabled (disconnected): #000000, Opacity 26%

【翻譯】
滑塊開：Swatch 500俱萍，不透明度100％
軌道開：Swatch 500端壳，不透明度100％
滑塊關(guān)：＃000000，不透明度26％
軌道關(guān)：＃000000枪蘑，不透明度26％
聚焦和單擊滑塊關(guān)：＃000000损谦，不透明度38％
聚焦和點擊軌道關(guān)：＃000000，不透明度38％
禁用（斷開連接）：＃000000岳颇，不透明度26％

image

Light theme

【翻譯】
亮色主題

Dark - 暗色

Thumb on: Swatch 200, Opacity 100%
Track on: Swatch 200, Opacity 100%

Thumb off: #FFFFFF, Opacity 30%
Track off: #FFFFFF, Opacity 30%

Disabled (disconnected): #FFFFFF, Opacity 30%

【翻譯】
滑塊開：Swatch 200照捡，不透明度 100％
軌道開：Swatch 200，不透明度100％
滑塊關(guān)：#FFFFFF话侧，不透明度30％
軌道關(guān)：#FFFFFF栗精，不透明度30％
已禁用（已斷開連接）：#FFFFFF，不透明度30％

[圖片上傳失敗...(image-7d0ad4-1552294634858)]
Dark theme

【翻譯】
暗色主題

Various slider behaviors

【翻譯】
各種滑塊行為

Spacing for icons to the left and/or right of the bar:

【翻譯】
圖標在欄的左側(cè)和/或右側(cè)的間距：

[圖片上傳失敗...(image-d2fd55-1552294634858)]
Example of spacing for icons in a slider.

【翻譯】
滑塊中圖標的間距示例瞻鹏。

image

Examples of sliders in normal, hover, focus, click, and disabled states.

【翻譯】
正常悲立，懸停，焦點乙漓，點擊和禁用狀態(tài)下滑塊的示例级历。

Discrete slider - 離散滑塊

The discrete slider thumb snaps to evenly spaced tick marks along the slider rail. Use for objective settings that require specific values for the user to make meaningful adjustments. Each tick mark should change the setting to a level that’s discernible to the user. The values are predetermined and aren’t user-editable.

【翻譯】
離散的滑塊拇指沿著滑塊軌道均勻分布的刻度標記。 用于需要特定值的目標設置叭披，供用戶進行有意義的調(diào)整。 每個刻度標記應將設置更改為用戶可辨別的級別玩讳。 這些值是預定的涩蜘，并且不是用戶可編輯的。

With a numeric value label - 帶有數(shù)值標簽

Use for settings for which users need to know the exact value of the setting.

【翻譯】
用于用戶需要知道設置的確切值的設置熏纯。

[圖片上傳失敗...(image-4057f7-1552294634858)]
Light theme

【翻譯】
亮色主題

image

Dark theme

【翻譯】
暗色主題

Animation of a discrete slider

【翻譯】
離散滑塊的動畫