导语:滑块拖动效果是原型设计中常见的交互效果。今天我们以豆瓣的评分区间筛选组件为例，谈谈如何在Axure中实现拖动滑块确定评分区间的交互。

一、相互作用效应的解释

滑块及评分数值跟随鼠标拖动沿水平方向移动，移动范围不能超出灰色背景条两端。拖动滑块时，橙色的进度条宽度随着滑块的拖动而变化。评分数值的坐标始终与滑块一致，且数值要随着滑块拖动在「0-10」的范围内变化。

效果预览:

二、组件准备

1.拖动一个[矩形]组件，设置组件宽度:300px，高度:6px，圆角半径:6，填充颜色:# EEEEEE，命名为“BackGround”。

复制一个“背景”，放在“背景”的上面。填入颜色:#FFB444，命名为“ProgressBar”。

2.拖进一个[round]元素，设置大小为28px*28px，线段宽度为1px，线段颜色为#A2A2A2。

在[圆形]组件上方拖动一个[文字标签]，设置字体颜色:# 99999，字体大小:12px，文字内容:“0分”，命名为“Min”。

选择并右键单击以上两个组件，将其转换为动态面板，命名为“左滑块”。

3.复制一个“左滑块”，并将其命名为“右滑块”。

双击进入动态面板修改文字标签的文字内容:“10分& # 8221；，名为“麦克斯”。

按照图中所示位置调整上述部件，所有部件准备就绪。

第三，添加交互

1.步骤1:添加拖动交互到滑块“左滑块”和“右滑块”。

1)将[拖动时]交互添加到左滑块，[移动]“左滑块”[跟随水平拖动]。

在这一步之后，滑块可以随着鼠标水平拖动，但是我们还需要限制滑块的左右拖动范围。“左滑块”的滑动范围不能超过其向左的初始位置和向右的右滑块的左坐标。滑动范围是灰色背景条“背景”的左坐标和滑块“右滑块”的左坐标之间的距离。

2)单击[更多选项]-[添加边界]，设置边界值[左≥[[背景.左]]和[右滑块]。向左]]。

边界值需要通过局部变量来获得。点击【添加局部变量】，设置局部变量“背景”[=][组件]“背景”；单击插入变量函数，值为[[背景。向左]]；同样可以得到右侧的边界值。具体数值参见下图。

3)将同样的交互添加到右侧的滑块“RightSlider”，数值如下图所示。

完成此步骤后，拖动滑块在设定范围内滑动。

2.第二步:添加橙色滑动条“进度条”的宽度随着滑动条的拖动而改变的交互

橙色滑块的宽度是右滑块的左坐标减去左滑块的左坐标。

给左侧滑块「LeftSlider」添加【移动时】的交互，目标为橙色滑动条「ProgressBar」的宽度，数值为[[rightslider.left-leftslider.left]]，同样需要结合局部变量获取对象，锚点为右侧；给右侧滑块「RightSlider」添加相同的交互，区别为锚点为左侧。

3.第三步:设置“最小”和“最大”文本标签的分值随着滑块的拖动而改变

1)将【移动时】交互添加到左侧动态面板“LeftSlider”，将“Min”的【text】值设置为[[math。(这个。左背景。左)/背景。宽度* 10)]。

左滑块滑动宽度=左滑块左坐标-灰色背景条左坐标；左分数=左滑块滑动宽度/灰色背景条宽度* 10；math.ceil(x)函数是一个向上舍入函数，它返回一个大于或等于参数x且最接近它的整数。

2)将[移动时]的交互添加到右侧的动态面板“RightSlider”，将“Max”的[text]值设置为[[10-math。ceil((背景。对-这个。右)/背景。宽度* 10)]。