滑块间隙调整

区间评分条是一种图形化的表示工具，用于展示某一范围内的数值或分数，并将其划分成不同的区间。这种评分条通常用于直观地显示数据的分布或某个指标的表现。常用于产品评价、调查和反馈、学术评价、健康评估、绩效评估、满意度调查等场景。

所以今天作者就教大家怎么在Axure里制作区间评分条的原型模板，具体效果如下所示：

一、效果展示

1、在滑块条区域可以左右拖动滑块，根据两个滑块所在的位置，自动计算出对应的区间

2、通过过程中左侧滑块不能超过右侧滑块，两个滑块之间自动变蓝，区间外的为灰色

原型地址：https://zikd7x.axshare.com/#g=1&p=区间评分条_返回数值

二、制作教程

• 滑块：我们用圆来制作，设置边线颜色为蓝色，边线可以设置粗一点，然后将圆转为动态面板，因为只有动态面板才有拖动的事件，复制这个滑块，我们需要左右两个滑块命名为开始和结束；
• 滑条：我们用矩形来制作，将矩形的圆角拉满，我们需要灰色和蓝色两个滑条，蓝色的在上方；
• 区间：区间我们用两个文本标签和一个~符号制作，分别对应开始和结束滑块；
• 满分值：用文本标签制作，里面填写分数的最大值，例如满分100就填100，满分是10就填10，默认隐藏即可，只用于后续逻辑运算。

如下图所示摆放即可

鼠标拖动左侧开始滑块时，我们首先用移动的交互，将滑块跟随鼠标水平移动，我们要增加一个移动的边界，左侧开始滑块的话边界应该是条形左侧的x值，以及右侧结束滑块的位置，那这里我们有两种不同的逻辑，看看是否需要留空隙，如果不需要留控制，右侧边界就是结束滑块最右侧的坐标值，如果需要留间隙，右侧边界可以调整为借宿滑块左侧的坐标值。

鼠标拖动有色结束滑块的交互也是一样的，只不过左右边界变成左边开始滑块的坐标值以及滑条最右边的坐标值。

如果不留间隙的话，这代表两个滑块可以重叠，重叠的时候就会出现有可能挡住下方滑块，例如右侧在左侧滑块的上方，我们先移动了左侧到达最右侧和结束滑块重叠，松手后，因为右侧在上方，我们只能拖动右侧滑块，因为边界的限制，右侧滑块就没法移动了，导致想移动左侧滑块也不行，所以我们在拖动时，要将拖动的滑块置顶，这样就可以避免这样的问题了。

这样就完成了两个滑块的移动，接下来我们要根据两个滑块移动的位置，设置蓝条的位置和尺寸，我们分别用移动事件和设置尺寸事件来完成。蓝色滑条的高度是不变的，宽度就是开始和结束两个滑块之间的距离；位置就是开始滑块的x坐标值。

我们还要根据滑块的位置设置对应的分值区间，我们用设置文本的交互就可以，拖动的是开始滑块我们就设置左侧分值区间，拖动的是右侧滑块，我们设置右侧的分值区间。按对应比例设置就可以了，简单来说就是滑块的x坐标值-滑条的x坐标值和滑条长度的比值在乘以满分值，例如满分是100分，滑条长200，滑块移动到100的中间位置，此时的分值就是(200-100)/200*100=50分。这里面的结果有可能不是整数，我们就用tofixed四舍五入函数取整即可。

设置完分值之后，基本就完成了，但是我们需要考虑的是如果满分值较小，例如是10分，因为我们前面用的四舍五入，所以很大一个方位会是同一个值，所以我们要根据数值，反推会对应的分值的中心点位置。我们用移动的交互，将开始滑块和结束滑块移动回对应的位置即可，这里的公式和上面的其实是一直的，上面是已知滑块的x坐标值求分值，现在是已知分值求滑块的x坐标值，我们移项就能解出来了。

最后我们还要考虑的是，滑块一开始不在两边的情况，这里相当于已经拖动过了，所以我们在载入时，我们要根据两个滑块的位置，设置分值，以及蓝条的尺寸和位置，这里和前面是一样的，我们在载入时触发前面滑块移动的交互就可以了

这样我们制作完成了，下次使用时，我们只需要根据实际需要修改满分值里的数字，就可以自动生成对应的区间评分条，是不是很方便呢？

那以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。

本文由 @AI产品人 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

宋咏婷983如何调整直线导轨之间的间隙 -
牧注黎18291091767 ______ 如果是轨道和滑块的间隙 只能更换钢珠.加大预压等级来调整.

宋咏婷983直线导轨的间隙要如何处理 -
牧注黎18291091767 ______ 采用磨刮相应的结合面或者是加垫片的方法,或者是调整平镶条、斜镶条

宋咏婷983冲压件的常见问题处理方法有哪些?
牧注黎18291091767 ______ 金阳冲压件的常见问题处理方法如下: 1、凸凹:开卷线有异物(铁屑、胶皮、灰尘)混入引起凸凹; 2、曲折:由于应力不均匀、拉延筋匹配不良或者压机滑块控制不良...

宋咏婷983冲一个孔的模具总啃口怎么办 -
牧注黎18291091767 ______ 如果是带导柱的冲模,模具啃口的原因是冲头与凹模的间隙没有对正,需要重新对正冲裁间隙.如果是不带导柱的敞开式的冲模,如果啃口,则可能是冲床滑块的间隙有点大,需要机床维修调整冲床滑块的间隙.

宋咏婷983赣州吊车怎样让吊臂不抖动呢?
牧注黎18291091767 ______ 为使吊车吊臂伸缩平稳,防止发生载荷冲击,在伸缩回路中设置了平衡阀,该阀由1个单向阀和1个溢流阀组成,其中溢流阀芯上设有阻尼孔,阻尼孔一旦堵塞,平衡阀就失去作用,从而引起吊臂伸缩时抖动.找出液压回路中进入空气的故障点,修复并将液压回路中的空气排出.

宋咏婷983数控雕刻机Z轴滑块轴承磨损间隙变大怎么办? -
牧注黎18291091767 ______ 除了换新的没什么好办法!新滑块也不贵吧...如果是那种可调节间隙的试着调节一下预紧螺丝

宋咏婷983普通63吨冲床离合器外出现哒哒声而却将下面挡块打坏 -
牧注黎18291091767 ______ 工作键损坏了,无法正常归位,才会出现声音.

宋咏婷983四柱油压机工作台下滑是什么原因 -
牧注黎18291091767 ______ 看你的四柱油压机是多大吨位的,有的是油缸里面油封坏了 漏油下滑,有的是抗衡阀不起作用下滑,

宋咏婷983模具谁有详细的安装方法 -
牧注黎18291091767 ______ 调模作业指导书1.清理冲床周围与工作台,用软布擦拭工作台面与滑块底面,必要时用油石游走一次2.调整冲床的装模高度略大于模具闭合高度3.用软布擦拭模座上面与下面,置模具于冲床工作台正中4.调整滑块下降,使滑块底面与模座上面良好接触,锁紧上模.5.以上模对正下模后锁紧下模.6.调整滑块使滑块上升,调整滑块到能够转过下死点并略有富余空间,试冲.7.逐渐向下调节滑块并试冲,用薄纸片片放置到模具限位块上,观察上下限位块间隙,直至纸片上有轻微压痕.8.放待制品到模具中定位试冲,同时测试产品,直到产品合格.9.首件送检合格后开始正常生产.

宋咏婷983油压机工作台与顶板的平行如何调整? -
牧注黎18291091767 ______ 100吨油压机工作台t形槽开口22或者28的.