在Axure RP 9+的自带元件库“Sample UI Patterns”中，有一个名为“滑块”的元件。
结合我们已经掌握《局部变量的应用》、《系统变量的应用》以及《动态面板的应用（4）》，这个元件我们可以自己完成。
首先，准备好需要的元件，包括：
一个灰色的无边框矩形，命名为“轨道”，高度是2像素，宽度是200像素，圆角半径2~100都可以，看上去一个鸟样。
一个蓝色的无边框矩形，命名为“进度”，高度是2像素，圆角半径2~100都可以。
一个圆形，宽高是30像素，转为动态面板之后，命名为“滑块”。
把“滑块”面板与“轨道”元件中心对齐，再把“进度”元件覆盖“轨道”元件上方，调整为适合的宽度。
然后，我们先添加拖动滑块的交互。
为“滑块”面板添加[拖动时]的交互，[移动]自身[跟随水平拖动]。
并且，添加移动范围的[边界]，左侧要大于等于“轨道”元件的左边界，右侧小于等于“轨道”元件的右边界。
这样才能在拖动滑块时，始终在轨道内移动。
“轨道”元件的两侧边界，我们添加局部变量[Track]获取[元件]，再通过局部变量调用元件的属性[left]与[right]，也就是元件左右边界的坐标值。
此时，在浏览器中查看原型的话，滑块已经能够在轨道内被拖动了。
但是，蓝色的“进度”不会跟随改变宽度。
所以，我们需要再为[拖动时]的交互[添加动作]，为[进度]元件[设置尺寸]。
[高度]保持不变，可以填写目标元件的高度，也就是“Target.height”。
[宽度]需要计算。
公式很简单，就是滑块左侧的边界值与轨道左侧边界值的差。
我们通过系统变量“This”获取当前“滑块”元件，并调用“x”属性值，这个值与“left”相同，可以使用任何一个。
再通过局部变量添加局部变量[Track]获取[元件]，然后调用元件的属性“x”。
在公式中，让他们相减，以计算出“进度”元件的宽度。
到这里，案例内容就全部完成了。
无情嘲笑：跳转到百度了是吧？都告诉你是软件自带元件库中的元件了，干嘛还要下载源文件呢？
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 可以拖动的滑块