本文案例的滑块更加高级，能够选择数量的区间。
这个也是Axure RP 10的Sample Form Patterns元件之一。
如果之前完成过《可以拖动的滑块-升级版》的话，本文的这个案例也没有太大难度。
先将元件在画布中准备好。
- 三个文本标签元件，文字默认为“选择范围”、“最小”和“最大”。
- 两个文本标签元件，默认值是“0”和“500”，分别命名为“最小值”和“最大值”。
- 浅蓝色的轨道和深蓝色的轨道都是高度“60”像素的矩形元件，圆角半径“3”以上即可。浅蓝色轨道名称为“轨道”，宽度是“200”像素；深蓝色轨道名称为“范围”，宽度是“85”像素。
- 两个圆形元件，直径为“30”像素，都转换为动态面板，并为动态面板分别命名为“最小值滑块”和“最大值滑块”。
将所有元件摆放好之后，开始进行交互设置。
1、为“最小值滑块”添加交互，让它能够水平方向拖动。
拖动时，左侧不能超过浅蓝色轨道左边界，右侧不能超过“最大值滑块”的右边界。
所以，需要[添加界限]。
左侧坐标值要大于等于“轨道”的左边界，“轨道”的左边界值通过局部变量进行获取。
右侧坐标值要小于等于“最大值滑块”的右边界，“最大值滑块”的右边界值同样通过局部变量进行获取。
2、拖动“最小值滑块”时，“范围”的尺寸跟随改变。
“范围”的尺寸是“最小值滑块”的左边界与“最大值滑块”左边界的差。
我们继续添加为[范围][设置尺寸]的动作，[高度]是[目标]元件的高度不变，可以填入“[[Target.height]]”。
[宽度]是“最大值滑块”的左边界减去当前滑块元件的左边界，先通过局部变量获取“最大值滑块”的左边界值或X坐标值，然后，减去当前滑块元件的左边界值或X坐标值。公式为“[[Max.x-This.x]]”。
3、拖动“最小值滑块”时，同步移动“范围”的位置。
为[移动]的动作[添加目标]，移动[范围][到达]指定的位置。
X轴坐标与当前被拖动的“最小值滑块”X轴坐标重合，所以是“[[This.x]]”
因为是水平移动，所以Y轴坐标保持不变，仍然是[目标]元件的Y轴坐标“[[Target.y]]”。
4、拖动“最小值滑块”时，计算并显示“最小值”的数值。
数值范围是“0~1000”，我们需要先通过“最小值滑块”的X轴坐标值减去轨道的X轴坐标获得最小值的范围值，再除以可拖动的最大范围值，这个值是轨道的宽度减去滑块的宽度。最后，还要用得到的比例值乘以1000并取整数，以计算当前的最小值。
我们[添加动作]为[最小值]元件[设置文本]。
文本的内容是一个计算公式：[[((This.x-Track.x)/(Track.width-This.width)*1000).toFixed(0)]]
5、拖动“最小值滑块”时，将滑块[置于顶层]，以免与另一滑块重合后无法再次拖动。
6、为“最大值滑块”添加交互，让它能够水平方向拖动。
拖动时，左侧不能超过“最小值滑块”的左边界，右侧不能超过“轨道”的右边界。
具体设置可以参考第1步。
7、拖动“最小值滑块”时，“范围”的尺寸跟随改变。
动作设置参考第2步。
不过，“范围”尺寸的计算公式需要改为当前元件的X轴坐标值减去“最小值滑块”的X轴坐标值。
8、拖动“最大值滑块”时，计算并显示“最大值”的数值。
动作设置参考第4步。
只是动作的[目标]元件选择[最大值]元件。
9、拖动“最大值滑块”时，将滑块[置于顶层]，以免与另一滑块重合后无法再次拖动。
此设置与第5步完全一致。
到这里，我们就完成了一个可以选择数值范围的滑块。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 可拖动的滑块-高级版