滑条|Axure高保真教程：滑动输入元件

编辑导语：滑动输入是一种方便快捷的输入方式，同时对数据精准度要求不高，只需要一个大概的范围。但由于Axure的基础原件中没有滑动输入的原件，因此本文主要讲解如何制作滑动输入元件，分享给大家。

文章插图
滑动输入主要是应用于数字的输入，例如价格、评分等，这是一种方便快捷的输入方式，对数据精确度要求不高，只是一个大概的范围。常用于服务评价、调查问卷、价格区间等等。
由于Axure的基础原件并没有滑动输入的元件，所以本期教程主要介绍如果制作滑动输入的元件，方便我们日后的使用。
一、制作完成后应具备以下效果

滑动滑块移动到对应的位置，按比例显示对应的数值。
点击滑动条具体位置，滑块移动到该位置，并且显示对应的数值。
在输入框输入具体数值后，滑块移动到对应的位置。

原型地址：https://sg7sjl.axshare.com/#g=1
二、制作材料

滑块——圆形滑块，可以用圆形元件制作，边线选择粗细及颜色即可
分值——滑块上方的显示的数字，可以通过矩形右键边框形状得到，也可以自行需要素材
动态面板——将滑块和分值放在动态面板内，因为Axure里面只有动态面板可以拖动。
灰色滑条——作为底部滑条
蓝色滑条——作为顶部滑条，后续添加交互能自动根据滑块位置移动到对应位置。
输入框——输入类型选择数字
最大值——用于记录最大值，案例中为100，该文本是为了复用性，如果最大值改变，例如变成10或者1000，只需要在上面输入对应的最大值即可。默认隐藏。

文章插图
材料如上图所示摆放即可。
三、交互制作1. 动态面板拖动时交互动态面板拖动时，我们要实现以下几个效果：
1.1 让动态面板跟随鼠标拖动而移动
我们用移动事件，选择跟随鼠标水平移动。这里需要注意的是，移动是用边界的。

左侧边界为，滑块中部圆心的x坐标不小于灰色滑条的x坐标；
右侧边界为，滑块中部圆心的y坐标不大于灰色滑条最右侧的坐标，最右侧的坐标其实就是灰色滑条的x坐标+他的宽度。

这里建议大家填写公式不要填写数字，如果填写数字的话，换个位置或者修改尺寸就要重新改这里的数字，复用性及差，如果用公式的话就没有这样的烦恼了。
1.2 让蓝色滑条的尺寸随着滑块移动和改变
我们用设置尺寸的交互来实现。
首先是蓝色滑条的高度是不变的，所以我们直接用target.height函数就行了，这里用函数也是为了复用性，很多同学还是习惯写数字，这样做出来的原型往往复用性很差，导致工作效率很低，所以还是建议大家能写函数的劲量写函数。
然后是蓝色滑条的宽度，它的宽度其实就是等于滑块圆心的x坐标-灰色滑条的x坐标。
1.3 设置分值和输入框的文本
最后我们还要根据滑块的文字设置分值和输入框对应的文本，那我们怎么计算出对应的数字呢，这里用到的是比值，我们用圆心的x坐标-灰色滑条的x坐标得到距离，用这个距离除灰色滑块的宽度得到比例，再用比例乘以最大值，就可以得到对应的分值了。最后我们还要用fixed函数四舍五入即可。