滑块让用户在给定范围内调整一个值或一段区间，常见于音量、亮度和价格筛选。
滑块适合在连续范围里快速探索，例如调整音量或预览亮度；需要准确金额、日期或数量时，应同时提供更精确的输入方式。下面结合已有组件案例说明选择与设计方法。
把滑块放回完整页面时，可借助可复用的界面控件统一标签、当前值与提示状态，先让用户知道正在调什么，再讨论手柄的视觉效果。
1. UI设计中的滑块是什么
滑块，是一个UI组件，模拟的是收音机的调谐或音量控制拨盘。它允许用户从左向右滑动旋钮、手柄或杆，反之亦然。UI滑块非常适合用以让用户快速同时浏览许多不同的选项或值，特别是当数量或值不需要很精确时。
UI滑块设计可帮助用户调整亮度、音量等设置，还可以让用户快速选择一系列值，当然，它还有许多其他用途。视频播放中的位置调节也是常见的连续取值场景。
滑块可以是单点的或双点的，后者我们经常在价格或预算范围选择器中看到它。按取值方式，它们可以是离散的或连续的：前者按指定步长移动，后者用于连续调节。
UI滑块设计需要兼具实用性和效率。除了作为实用组件之外，这些UI控件还为用户提供了一种更具视觉吸引力和交互性的方式。
拖动有助于快速比较不同取值带来的变化，但不一定比键入数字更省力；需要精确命中某个值时，单靠滑块反而可能增加操作。
虽然从上文看来，滑块似乎有很多优点，但如果它们做错了，也可能会破坏你的设计。
2. 何时在UI中使用滑块
那么，哪些任务最适合使用滑块呢？首先，我们需要厘清UI滑块设计的主要目标：帮助用户尽可能快速、轻松地完成任务，同时提高交互性。
滑块可以执行许多任务，远远超出了简单的音量滑块控制。它们可以是一种方便的方式，可以帮助用户缩小搜索范围，而避免了解次要的细节造成的认知负荷。例如，在下图来自Pixso资源社区的移动端社交软件案例中，用户可以通过使用滑块控件来筛选社交对象的距离范围或年龄阶段。
但是，UI滑块其实一直是设计世界中一个有争议的组件。因为如果你在错误的情况下应用UI滑块，它们可能会破坏你的数字产品的用户体验。
下面是你可以考虑使用UI滑块设计的场景：
-
当选项按连续或有序数值排列时
-
希望用户快速比较不同取值的效果时
-
当数值不需要精确时
-
调整亮度、对比度和饱和度/透明度控制
-
用于放大或缩小界面图形时
-
用于音量控制时
-
旋转 3D 对象
为了让用户的体验更便捷，建议在可以使用简单UI设计排版的情况下，替代UI滑块控件。例如，假设你必须要让用户能够从选项列表中进行选择，那么在有空间的前提下，最好从一开始就显示所有可用选项。
3. 如何设计UI滑块
-
为用户提供尽可能多的详细信息
UI滑块是帮助用户更好地浏览新选项或了解所需选项的好方法。但是，滑块本身也可能会让用户对其在屏幕中的功能感到困惑。所以UI滑块的设计需要尽可能提供更多的详细信息给用户，避免指示不明造成的困惑。
- 包括方向箭头
UI滑块设计还可以在滑块的上面放置图标，以向用户指示可以移动手柄。最常见的选择往往是箭头或加号和减号，或左箭头和右箭头。
-
使用双点滑块选择值范围
双点UI滑块设计是一种聪明的选择，它可以避免使用两个单独的滑块来引用搜索的同一方面，将它们组合在一个相关的滑块中，在过滤价格范围定义最低和最高价格时，这种设计特别有效。
-
显示当前取值
还有一些UI滑块，它们的存在不是为了过滤选项，而是为了帮助用户可视化可用选项。滑块可以控制一个连续参数，例如尺寸、音量或强度；下图展示了当前数值与轨道位置的对应表达。它不仅可以让用户立即感受到可用选项，还可以将当前选择的选项置于上下文中。
此外，在旋钮控件上显示值可以达到在小空间内显示信息的目的，但我们应该注意要让旋钮足够大，确保该值不会被用户的光标遮挡。
-
包括加号和减号控件
使用加号和减号按钮作为附加控件，以沿着轨道移动旋钮。这对于可能年龄较大或可能运动控制受损的用户特别有效。
-
允许用户手动更改值
允许用户拖动选择大致范围，也允许在配套输入框里填写具体数值。两种操作应修改同一个值，并同步更新手柄位置；越界输入要有说明，不能悄悄替换成另一个数字。
-
预算从300到800：先确定两个端点的规则
假设商品筛选允许预算范围为0至2000元，当前选中300至800元。轨道负责帮助用户探索范围，左右输入框负责精确填写。单位“元”、允许范围和当前选择应同时清楚，不要让用户通过手柄位置猜金额。
最小值不能大于最大值。可以让两个手柄在相遇时停止，也可以明确支持交换端点，但行为必须稳定，不能拖过一次后“最低价”突然变成“最高价”。如果用户在最低价输入900，而最高价仍是800，可保留输入并提示“最低价不能高于最高价”，让他修正；不要未经解释就改成800。
步长要服务业务：只售整百价位的套餐可以按100移动，商品价格筛选则不应让刻度的美观替代真实价格范围。对于跨度很大的数据，非线性刻度需要明确标识，否则相同拖动距离可能产生难以预期的数值变化。
不用拖动，也应能完成同一个调整
配套数字框或加减按钮能帮助用户精确调整。键盘焦点落到手柄时，方向键按步长增减，Home与End到达允许范围的两端；这是W3C Slider模式描述的常见键盘行为。双端点还应有“最低价格”“最高价格”这样的独立名称，而不只是两个外观相同的圆点。
调整亮度可以即时预览；价格筛选若会发起较慢请求，则可以在松开手柄或点击“应用”后更新结果，并保留当前区间。先确定反馈时机，再画加载状态，避免每移动一点就让整个列表闪动。
为手柄提供足够的操作区域
始终确保旋钮、手柄或栏足够大，以便用户能够用鼠标轻松单击它。如果要使用移动UI滑块设计，旋钮周围的填充非常重要，因为拇指或手指通常比光标更大且精度更低。
在 Pixso 工作台中，可以保留现有滑块样式，补出最小值、最大值、正在调整和输入错误四种状态，再把它放回实际筛选面板评审。
