滑块（Slider）控件主要是让用户通过拖动手柄来选择数值。

和步进器每次点击调整固定步长不同，滑块的拖动是连续的，用户可以快速从一端拉到另一端，也可以精细地微调到某个位置。这种流动感让滑块在调整「量感」类数值时格外自然：音量不需要精确到第 47 格，亮度不需要精确到 63%，用户只需要「感觉差不多了」就松手。

判断一个场景该不该用滑块，看一点就够了：用户是否接受近似值。接受，用滑块；不接受（转账金额、商品数量），用数字输入框或步进器。

一、四种类型

1. 连续滑块

连续滑块是最基础的滑块形态。手柄可以在轨道上任意位置停留，没有固定步长。音量、屏幕亮度、图片滤镜强度都是典型的连续滑块使用场景，用户在这些场景下的关注点的是「听起来合适」「看得清楚」「效果满意」，而不是停在某个精确数字上。

连续滑块需要考虑是否显示数值。音量可以不显示，只靠拖动位置判断大小；但 RGB 颜色通道必须显示精确数值，因为设计师需要明确知道红色通道是 128 还是 255。对后一种场景，通常会在滑块旁边搭配一个可编辑的数字输入框，两者双向联动：拖动滑块时输入框实时更新，在输入框输入数字时手柄跳到对应位置。这种组合让用户在粗调（拖滑块）和精调（输入数字）之间自由切换，它在颜色选择器和音频处理软件里最常见。

2. 离散滑块

离散滑块只允许停在预定义的数值点上，轨道上有刻度线标记这些位置。手柄在相邻刻度点之间连续移动，松手时自动吸附到最近的那个点上。播放速度就是典型的离散场景：0.5x、0.75x、1x、1.25x、1.5x、2x，六个选项，每个都有明确含义。内容评级（1 到 5 星）和显示文字大小（小/中/大/超大）也是同样的逻辑，选项有限，每个选项都有具体语义。

离散滑块的刻度点数量有最优范围，大约 4 到 12 个。少于 4 个时，直接用单选按钮更清晰，因为选项太少，「拖动选择」的交互成本比「直接点选」的高；超过 12 个时，刻度线在轨道上密集排布，拖动时很难精确停在目标点上，改用下拉菜单或列表更合适。

3. 范围滑块

范围滑块有两个手柄，分别代表区间的下限和上限，用户可以铜鼓分别拖动来确定一个值域范围。最常见的场景是筛选。价格区间筛选里，左手柄设置最低价，右手柄设置最高价，两个手柄之间的轨道高亮为已选区间。时间段筛选和年龄区间筛选也是同样的模式。

两个手柄不能互相越过，左手柄永远在右手柄左边。但当用户把两个手柄拖得很近时，手指很容易抓错，这是范围滑块在移动端最大的可用性问题。设计时需要设定两个手柄之间的最小间距，保证它们不会重叠到无法分辨。如果范围选择的精度要求高，最好在滑块下方配合两个可编辑的数字输入框，拖不准的时候可以直接输入。

4. 居中滑块

居中滑块的默认值在轨道中点，向左拖动为负方向，向右拖动为正方向，已选段从中点向外延伸。音频均衡器各频段的增益调节（−12dB 到 +12dB，0dB 为基准）、色调偏移（偏冷或偏暖）、对比度调整（−100 到 +100，0 为原始），这些有「正负」语义的参数都适合居中滑块，因为从中间向两侧延伸的视觉特征可以让用户直观看到「偏向哪个方向、偏了多少」。

反过来看，商品数量要精确到个，用步进器；转账金额要精确到分，用数字输入框；性别或国籍只有两三个选项，用单选按钮；是/否的二值选择，用开关。这些场景的共同点是用户不接受近似值，滑块帮不上忙。

二、滑块的构成

1. 轨道是滑块的横向条形基座。视觉上分为两段：已选段从轨道起点延伸到手柄当前位置，通常使用主题色填充；未选段从手柄位置延伸到轨道终点，使用浅色或灰色。用户通过两段颜色的对比可以判断的当前数值位置。轨道的粗细需要平衡，过细难以触控（尤其是移动端），过粗让页面显得笨重。iOS 的轨道相对纤细，MD3 的已选段轨道为 6dp，未选段为 4dp，两者高度差异让已选范围在视觉上更为突出。

2. 手柄是用户直接操控的圆形控件，它的位置对应当前选中的值。手柄的触控面积是一个关键约束。视觉上手柄可能只有 20–24pt，但可点击和拖动的热区必须远大于视觉图形。iOS 要求最小触控目标为 44pt × 44pt，MD3 的要求是 40dp × 40dp。如果热区过小，用户在移动端按住手柄后很难拖动，尤其是手柄接近轨道端点时，稍微有一点偏差就会错过。

3. 端点标签位于轨道两端，主要作用是告诉用户这个滑块的范围和方向。形式上可以是数字（「0」和「100」）、图标（音量滑块左端小喇叭、右端大喇叭）或文字（色温滑块左端「冷」、右端「暖」）。不是所有滑块都需要端点标签，但如果没有，用户面对的将会是一条空轨道，于是不知道向左拖是增还是减。滑块调整的内容越抽象，端点标签就越不能省。

4. 刻度线是离散滑块专属的元素，沿轨道标记每个可以停留的数值点，通常是小圆点或短竖线。刻度线的存在告诉用户：这个滑块不是连续的，只能停在这几个固定位置上。MD3 里将这些点称之为 Stop Indicators。

5. 数值气泡在用户拖动手柄时出现在手柄上方，显示当前精确值，松手后消失。滑块本身是模拟的，拖动过程中用户很难判断当前位置数值的精确值是多少，气泡就是为了在拖动时补上这个信息。MD3 内置了这个行为，iOS 原生滑块没有数值气泡，需要自定义实现。

6. 当前值标签通常放在滑块旁边，用来显示当前数值，它不像数值气泡那样，只在拖动时才出现。RGB 通道调整、音频均衡器这类需要用户随时知道精确值的场景，当前值标签是必须的；而调节屏幕亮度这类，用户只关心大概位置的场景，可以省略。

二、交互细节

滑块有四个交互状态。

1. 默认状态下，手柄静止在当前值对应的位置，轨道显示已选段和未选段的颜色差异，整体视觉权重中等。

2. 拖动状态是交互最密集的阶段。iOS 手柄外观在按下时基本不变；MD3 的手柄在按下时状态从圆形变为圆角方形，宽度增加，这个形变会告诉用户「正在操控中」。如果有数值气泡（MD3 内置，iOS 需自定义），气泡在手柄上方弹出，随拖动实时更新数值。

拖动时，滑块控制的对象必须能够实时响应。比如音量会跟着手柄位置发生改变。用户选择使用滑块而不是数字输入框，就是为了「一边拖一边看效果」，拖动和反馈之间不能有延迟。

3. 松开状态下，MD3 的数值气泡会消失，手柄恢复圆形。如果是离散滑块，松开时手柄会自动吸附到最近的刻度点。

4. 禁用状态下，轨道和手柄整体变灰，不响应触控。禁用的视觉变化必须足够明显。如果和启用状态差异不大，用户会反复尝试拖动，并怀疑是触控出了问题。禁用时通常需要配合说明文字，告诉用户为什么当前状态不可调整。

三、平台差异

iOS 的原生滑块外观简洁克制。轨道纤细，已选段填充系统蓝色，未选段浅灰色。手柄是白色圆形带轻微投影，在任何颜色的轨道上都清晰可见。iOS 支持在轨道两端配置自定义图标，音量滑块左端小喇叭、右端大喇叭已经是用户熟悉的视觉语言。

iOS 原生滑块不内置数值气泡，拖动时手柄上方不会自动显示数值。如果设计需要气泡，需要自定义实现，并在设计规格中明确标注。离散刻度线同样不是内置的，需要自定义。

iOS HIG 有一条明确的使用禁忌：不应该用普通滑块控制设备的系统音量。系统音量有专用的音量控制组件（VolumeView），iOS 会在硬件音量键按下时显示系统级音量 HUD。App 内用普通滑块覆盖系统音量会和系统行为冲突。应用内的媒体音量（只影响当前 App 播放内容）和系统音量是两个不同的概念，设计时需要区分。

MD3 提供四种官方变体：连续、离散、居中、范围，每种都有完整规范。轨道尺寸有精确定义，已选段高度 6dp，未选段 4dp。手柄静止时为圆形，用户按住拖动时形态变为圆角方形，宽度增加，提供「正在操控」的视觉反馈。数值气泡是 MD3 标准滑块的默认行为，拖动时自动出现，松手后消失，不需要额外开发。离散滑块的刻度点（Stop Indicators）沿轨道均匀分布，也是内置的。范围滑块官方支持双手柄配置。

四、常见误区

1. 用滑块选择需要精确值的内容

转账金额用滑块调整，用户很难精确停在「1500.00」，稍微偏一点就变成 1498 或 1502。需要精确值的场景必须用数字输入框。

2. 滑块没有端点标签

轨道两端空无一物，用户不知道最小值是 0 还是 −100，最大值是 1 还是 100，也不知道向左拖是变大还是变小。端点标签是告知范围和方向的必要信息。

3. 离散滑块刻度点超过 12 个

刻度点太密，用户看不清每个刻度代表什么，拖动时也难以精确停在目标位置。超过 12 个选项的场景，改用下拉菜单或列表。

4. 拖动时效果延迟

用户拖动音量滑块，松手后声音才改变，这破坏了滑块「一边调一边看效果」的核心价值。如果因性能限制无法实时更新，要重新考虑是否适合用滑块，而不要用延迟更新来将就。

5. 移动端范围滑块两个手柄间距太小

价格区间筛选时，用户可能把最低价和最高价拖到几乎重叠，手指分不清按住的是哪个手柄。设计时要给两个手柄设定最小间距，同时在下方配数字输入框兜底。

6. 在 iOS 上用普通滑块控制系统音量。

这直接违反 iOS HIG 的指导要求。系统音量由 iOS 统一管理，普通滑块无法和系统音量保持同步，用户按硬件音量键调整后，App 内的滑块位置不会更新，出现状态也会不一致。应该使用系统提供的音量控制组件，或只控制 App 内的媒体音量。

7. 手柄触控热区太小。

手柄视觉是一个 16pt 的小圆，实际热区也只有 16pt × 16pt，用户需要非常精确地按住才能拖动。正确做法是将热区扩展到 44pt（iOS）或 40dp（MD3），即使视觉上的圆形很小，手指可触达的区域也要足够大。

8. 离散滑块松手后没有吸附。

用户松手时手柄停在两个刻度点之间，当前值悬空，这不是一个合法的离散值。离散滑块必须在松手时自动跳到最近的刻度点。如果设计规格里没有写明这个行为，开发可能会实现成没有吸附的版本。