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.

【翻译】
滑块允许用户通过移动滑块缩略图从一系列值中进行选择。
滑块是用于调整反映强度级别（如音量，亮度或色彩饱和度）的设置的理想组件。
滑块可以在条的两端具有反映值强度的图标。将滑块范围的最小值放在左侧，将最大值放在右侧。

Continuous sliders - 连续滑块

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.

【翻译】
连续滑块允许用户沿主观范围选择一个值。它们不需要特定的值来进行调整，尽管在某些情况下，它们可以提供可编辑的数值。

Discrete sliders - 离散滑块

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

【翻译】
离散滑块允许用户从范围中选择特定值。

Continuous slider - 连续滑块

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

【翻译】
对于不需要特定值的主观设置，使用连续滑块进行有意义的调整。

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％
滑块关：＃000000，不透明度26％
轨道关：＃000000，不透明度26％
聚焦和单击滑块关：＃000000，不透明度38％
聚焦和点击轨道关：＃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％
滑块关：#FFFFFF，不透明度30％
轨道关：#FFFFFF，不透明度30％
已禁用（已断开连接）：#FFFFFF，不透明度30％

[图片上传失败...(image-7d0ad4-1552294634858)]
Dark theme

【翻译】
暗色主题

Various slider behaviors

【翻译】
各种滑块行为

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

【翻译】
图标在栏的左侧和/或右侧的间距：

[图片上传失败...(image-d2fd55-1552294634858)]
Example of spacing for icons in a slider.

【翻译】
滑块中图标的间距示例。

image

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

【翻译】
正常，悬停，焦点，点击和禁用状态下滑块的示例。

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.

【翻译】
离散的滑块拇指沿着滑块轨道均匀分布的刻度标记。 用于需要特定值的目标设置，供用户进行有意义的调整。 每个刻度标记应将设置更改为用户可辨别的级别。 这些值是预定的，并且不是用户可编辑的。

With a numeric value label - 带有数值标签

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

【翻译】
离散滑块的动画