简介：
滑块功能在各种应用程序和网站中广泛应用，例如音量控制器中的音量滑块、图像编辑器中的亮度滑块、视频播放器中的进度条滑块等。滑块功能简单直观，让用户可以快速调整数值或设置，提高了用户体验和交互性。今天我们拿Material Design做一个实例。
分析：
最基本的滑块通常包含以下要素：
- 标签(Tag)：用来标注滑块的用途或数值单位等相关信息。
- 轨道(Track)：滑块按钮沿着移动的轨道，控制滑块的位置。
- 高亮轨道(Highlight Track)：滑块移动时，实现高亮的轨道。
- 滑块按钮(Thumb)：用于拖动和调节滑块位置的按钮或手柄。
- 当前值(Current Value)：滑块按钮所处的具体数值，通常会实时显示在滑块附近。
- 最小值(Max Value)：用来表示滑块范围的最小数值。
- 最大值(Max Value)：用来表示滑块范围的最大数值。
增强版的滑块还会包含这些功能：
- 数值输入框。
- 减少值按钮(Decrease Value)：点击减少数值。
- 增加值按钮(Increase Value)：点击增加数值。
再高级一些的滑块还会包含但不限于以下功能：
- 可禁用。
- 点击轨道调整数值。
- 滑块按钮鼠标悬停效果。
- 支持离散值。
- 垂直方向
- 范围选择。
- 轨道特殊背景色。
- 轨道特殊形状。
我们先来准备一个最基础类似ElementUI样式的滑块。
第一步，准备：
只保留最精简的几个部分：
- 滑块按钮(Thumb)：圆形，宽度20px，高度20px，边框2px，边框颜色#409EFF，
- 高亮轨道(Highlight Track)：矩形，宽度300px，高度6px，填充#409EFF，圆角3px。
- 轨道(Track)：矩形，宽度300px，高度6px，填充#E4E7ED，圆角3px。
为了在滑块全部完成前方便观察交互，可以先将三个元件居中对齐并且垂直分布。
第二步，调整：
将上面三个元件全部转为动态面板，并且略微调整一下样式：
- 滑块按钮容器(Thumb Container)：不做修改。
- 高亮轨道容器(Highlight Track Container)：宽度150px，高度6px，圆角3px。
- 轨道容器(Track Container)：高度6px，圆角3px。
第三步，滑块交互：
非常简单，只要滑块按钮(Thumb)在拖动时，让其沿x轴进行拖动，限制左右可移动范围即可。我个人更喜欢使用Thumb的中心点，做为确定数据的依据，所在需要在合适的地点调整半个滑块的宽度。
你会发现公式函数里都有一个叫Track的局部变量，所以每个公式里都要设置对应的元件：
交互的文字表述如下：
- 拖动时
- 移动
- 目标：当前
- 移动：跟随水平拖动
- 边界：
- 左侧 >= [[Track.Left – This.Width/2]]
- 右侧 <=[[Track.Right + This.Width/2]]
- 移动
- 移动时
- 设置尺寸
- 目标：(Highlight Track Container)
- 尺寸：[[This.Left + This.Width/2 – Track.Left]]
- 设置尺寸
有人可能会问：“直接改变高亮轨道(Highlight Track)的长度不是更简单直接么？”的确，大部分时候，我们的高亮轨道(Highlight Track)都是单一颜色，形状较为方正的，都可以直接改长度。但是如果高亮轨道(Highlight Track)是有渐变色的或者特殊形状的(比如：音量调整)，那么使用更改父容器宽度就更为合适了。
第四步，轨道点击效果：
如果可以鼠标轨道进行调整就可以赋予滑块更多灵性，所以我们在轨道容器(Track Container)上添加交互：
然后在高亮轨道容器(Highlight Track Container)上也添加交互：
第五步，对齐：
其实这时已经可以预览一下看看效果了，但是还需要做后一步，将三个容器进行水平居中，为了方便以后使用，整体也可以进行组合操作。
结尾：
一个基本功能的滑块元件就完成了，下一篇会加怎么实时显示数值。
如果觉得我的教程做的不错呢，欢迎关注、收藏、转发、捐赠，谢谢。
原文链接：使用Axure制作Slider滑块功能(一)-基础滑块
转载请注明：最InのAxure » 使用Axure制作Slider滑块功能(一)-基础滑块