滑块允许用户通过移动手柄在一个数值范围内进行选择。
滑块是调整强度或等级类设置(如音量、亮度或色彩饱和度)的理想组件。
可在轨道两端放置反映数值强度的图标。将滑块范围的最小值置于左侧,最大值置于右侧。
连续滑块
连续滑块允许用户在连续的主观感知范围内进行选择。它们通常不需要特定的数值进行调整,但在某些情况下可提供可编辑的数值。
离散滑块
离散滑块允许用户从预定的范围中选择一个特定值。

滑块是调整强度或等级类设置(如音量、亮度或色彩饱和度)的理想组件。
可在轨道两端放置反映数值强度的图标。将滑块范围的最小值置于左侧,最大值置于右侧。
连续滑块允许用户在连续的主观感知范围内进行选择。它们通常不需要特定的数值进行调整,但在某些情况下可提供可编辑的数值。
离散滑块允许用户从预定的范围中选择一个特定值。

连续滑块适用于对数值精度要求不高、更依赖主观感受的设置。
打开时的滑块手柄:500号色板,不透明度 100%
打开时的轨道:500号色板,不透明度 100%
关闭时的滑块手柄:#000000,不透明度 26%
关闭时的轨道:#000000,不透明度 26%
关闭状态下,聚焦及按下时的滑块手柄:#000000,不透明度 38%
关闭状态下,聚焦及按下时的轨道:#000000,不透明度 38%
禁用状态(轨道与手柄无连接部分):#000000,不透明度 26%

亮色主题
打开时的滑块手柄:200号色板,不透明度 100%
打开时的轨道:200号色板,不透明度 100%
关闭时的滑块手柄:#FFFFFF,不透明度 30%
关闭时的轨道:#FFFFFF,不透明度 30%
禁用状态(轨道与手柄无连接部分):#FFFFFF,不透明度 30%

暗色主题
不同的滑块交互行为
图标与轨道左右两端的间距:

滑块中图标间距示例。

滑块在正常、悬停、聚焦、按下和禁用状态下的示例。
用于需要设置精确值的场景。按下滑块手柄后,文本框变为可编辑状态,其数值会随手柄移动自动更新。

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

具有可编辑数值的滑块在正常、悬停、聚焦、按下和禁用状态下的示例。
离散滑块的滑块手柄会吸附到轨道上等间距的刻度。适用于需要用户设置特定数值的客观设置项。每个刻度对应的变化应对用户可感知。数值是预先设定且不可编辑的。
用于用户需要知晓精确数值的设置项。

亮色主题

暗色主题
离散滑块的动效