组件 滑块

滑块

滑块允许用户通过移动手柄在一个数值范围内进行选择。

滑块是调整强度或等级类设置(如音量、亮度或色彩饱和度)的理想组件。

可在轨道两端放置反映数值强度的图标。将滑块范围的最小值置于左侧,最大值置于右侧。

连续滑块

连续滑块允许用户在连续的主观感知范围内进行选择。它们通常不需要特定的数值进行调整,但在某些情况下可提供可编辑的数值。

离散滑块

离散滑块允许用户从预定的范围中选择一个特定值。

Material Design 中的滑块控件

连续滑块 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

连续滑块适用于对数值精度要求不高、更依赖主观感受的设置。

亮色主题

打开时的滑块手柄:500号色板,不透明度 100%
打开时的轨道:500号色板,不透明度 100%

关闭时的滑块手柄:#000000,不透明度 26%
关闭时的轨道:#000000,不透明度 26%

关闭状态下,聚焦及按下时的滑块手柄:#000000,不透明度 38%
关闭状态下,聚焦及按下时的轨道:#000000,不透明度 38%

禁用状态(轨道与手柄无连接部分):#000000,不透明度 26%

Material Design 亮色主题连续滑块

亮色主题

暗色主题

打开时的滑块手柄:200号色板,不透明度 100%
打开时的轨道:200号色板,不透明度 100%

关闭时的滑块手柄:#FFFFFF,不透明度 30%
关闭时的轨道:#FFFFFF,不透明度 30%

禁用状态(轨道与手柄无连接部分):#FFFFFF,不透明度 30%

Material Design 暗色主题连续滑块

暗色主题

不同的滑块交互行为

图标与轨道左右两端的间距:

Material Design 滑块中图标间距示例

滑块中图标间距示例。

Material Design 滑块状态示例:正常、悬停、聚焦、按下、禁用

滑块在正常、悬停、聚焦、按下和禁用状态下的示例。

含可编辑数值

用于需要设置精确值的场景。按下滑块手柄后,文本框变为可编辑状态,其数值会随手柄移动自动更新。

Material Design 中具有可编辑数值的滑块

具有可编辑数值的滑块示例

Material Design 中具有可编辑数值的滑块状态示例

具有可编辑数值的滑块在正常、悬停、聚焦、按下和禁用状态下的示例。

离散滑块 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

离散滑块的滑块手柄会吸附到轨道上等间距的刻度。适用于需要用户设置特定数值的客观设置项。每个刻度对应的变化应对用户可感知。数值是预先设定且不可编辑的。

含数值标签

用于用户需要知晓精确数值的设置项。

Material Design 亮色主题离散滑块

亮色主题

Material Design 暗色主题离散滑块

暗色主题

离散滑块的动效