一、准备阶段

先制作一个335*36的矩形（命名为：分母），将矩形的4个角的圆角设置为18；

在矩形分母上方，制作一个100*36的矩形（命名为：分子），矩形分子左侧的两个圆角设置为18，将其颜色改为蓝色，并增加1像素的边框效果（如图）；

注意：这里的边框效果选色时最好是纯色，不设置透明度的。不然之后会出现一些无法解释的后果（坏笑一下）。

因为需要拖动，那我们这边增加一个拖动的载体：制作一个36*36的圆，去掉边框；为了后续看到的圆会更立体些，可以增加移量为0*0、范围为5的投影效果；

差点忘记了，还需要在最上方增加一个表单元件中的文本框，将该元件禁用后，把其元件样式改为文本段落（如图），删除系统默认的交互样式，并将字体的对齐方式改为居中（为啥要将元件的样式改为文本段落，这个在之后讲解交互的时候再透露）；

准备工作已经完成了，接下来就该开始设计交互效果了。

二、交互设计

在预览的地址中，可以看到滑块需要跟随移动。所以我们需要选中圆，然后鼠标右击，将其转换为动态面板，并在交互中选择【拖动时】的交互：

拖动时，我们需要水平移动圆的位置，设置动态面板跟随水平移动；
因为我们需要圆在分母的范围内进行移动，那再给圆设置一个左右的限制。左侧：需大于等于分母的左边位置；右侧：需要小于等于分母的右边位置（如图）；

左侧函数：[[LVAR1.left]] ；右侧函数：[[LVAR1.right]]。其中“LVAR1”为局部变量，指代分母（如图）；

移动的效果已经设置完成了，接下来需要让分子跟随圆移动的距离，改变长度。给动态面板增加设置分子尺寸的动作；

先要知道圆具体移动的多少距离要怎么算，需要有个静态的参照物，而滑动条中唯一是静态的就只有分母了，所以我们需要使用圆移动后的 X 坐标减去分母的 X 坐标，这就获得了偏移量（如图），x轴的函数为：[[This.x-LVAR1.x+18]] ；
Y轴由于没有变化，这里就直接使用了分子原来的高度36，锚点可以是左上或者左侧都可以；

前面有提到，不要给分子的描边颜色增加透明度，是因为增加透明度后，在你移动后，分子的样式会发生变形，至于原因，我也不知道，这只是我踩到的坑。

接下来，我们需要对文本的内容进行设置了，给动态面板再增加一个设置文本的动作：

数值占比，具体计算：用分子的宽度除以分母的宽度，再乘以100，然后取整；所以我们这里需要用到取整的函数 toFixed(decimalPoints) （如图）；

设置局部变量“LVAR1” 为分子，“LAVR2”为分母；整体的函数为：[[((LVAR1.width-18)/(LVAR2.width-36)*100).toFixed(decimalPoints)]]（如图）；

再注意一个细节：我的分子位置就到圆形的一半，如果要是和圆形右对齐的话，在缩到最右侧的时候，分子也是会出现变形，所以我这边在计算时，需要将分子的长度减去18，分母的宽度减去36；

到这一步就可以算是完成了滑动条的设计了，可以先预览下效果，但你可能会发现停留在文字上方的时候，就会变得特别难拖动了，别急，还有两个步骤；

三、优化升级

前面之所以使用表单元件文本框，是因为文本框可以设置一个文本改变时的交互动作，你预览现在的效果，能看到数值是从0到100；

所以这里需要给文本框增加一个交互效果：文本改变时，将内容设置为数值：1（如图）；

这里需要增加一个判断条件，就是当数值等于0的时候，我们需要将数值强行设置为1；

最后，将素材全选后，鼠标右键将其转换为动态面板，再为动态面板增加拖动时的交互，动作设置为触发动态面板1的拖动效果，就有了原型预览里体验到的效果了（如图）。

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

题图来自 Unsplash，基于 CC0 协议

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

","gnid":"940061f8c100eca1e","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t01c797ee60063d4b38.jpg","width":"900"},{"desc":"","height":"769","title":"","url":"https://p0.ssl.img.360kuai.com/t01c2900fbd9de2a3ed.jpg","width":"1227"},{"desc":"","height":"688","title":"","url":"https://p0.ssl.img.360kuai.com/t01dc09b11332a017f0.jpg","width":"1261"},{"desc":"","height":"650","title":"","url":"https://p0.ssl.img.360kuai.com/t0170e58bd7d7b6d2e6.jpg","width":"1284"},{"desc":"","height":"582","title":"","url":"https://p0.ssl.img.360kuai.com/t019a7934e2bbca25d0.jpg","width":"1008"},{"desc":"","height":"472","title":"","url":"https://p0.ssl.img.360kuai.com/t011a24363829d49dd7.jpg","width":"700"},{"desc":"","height":"796","title":"","url":"https://p0.ssl.img.360kuai.com/t01e22143b1fae0c110.jpg","width":"1128"},{"desc":"","height":"582","title":"","url":"https://p0.ssl.img.360kuai.com/t0189894d0300797f15.jpg","width":"1008"},{"desc":"","height":"472","title":"","url":"https://p0.ssl.img.360kuai.com/t01e126d992ef0a4621.jpg","width":"700"},{"desc":"","height":"582","title":"","url":"https://p0.ssl.img.360kuai.com/t010db53666b3e3ba0c.jpg","width":"1008"},{"desc":"","height":"582","title":"","url":"https://p0.ssl.img.360kuai.com/t01f3b85e81ad05165c.jpg","width":"1008"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"pika","pub_time":1706837520000,"pure":"","rawurl":"http://zm.news.so.com/f381fd58d04536e536f1bb05b5b853ae","redirect":0,"rptid":"aa3ae82044c98ad7","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[{"clk":"kdigital_1:移动","k":"移动","u":""}],"title":"Axure：利用动态面板制作滑动条

韩斧俗1381如何在Word里给文字设置15%的蓝色底纹 -
黄音促18066544764 ______ 选中文字--工具栏上的“格式”菜单→边框和底纹,进入“底纹”标签在图案栏的样式框里选择百分比然后下面的颜色栏会被激活选择“蓝色” 确定 OK

韩斧俗1381WORD文档如何添加蓝色阴影边框 -
黄音促18066544764 ______ 式->,再将颜色设置为蓝色即可;边框和底纹->,设置下选中阴影样式的边框;页面边框,这个是给文档加边框

韩斧俗1381怎样给office2003WORD文档的文字加蓝色底纹 -
黄音促18066544764 ______ 选定文字 , 选择下拉菜单＂格式＂ ,＂边框底纹＂ , ＂底纹＂(样式为清除),选择一种蓝色确定搞定

韩斧俗1381word段落边框怎么设置(word段落边框怎么设置上下左右各三磅?
黄音促18066544764 ______ 1. word段落边框怎么设置上下左右各三磅1.首先在打开的Word文档中选中需要设置的文本内容并点击上方段落选项卡中的边框图标.2.然后在打开的选项卡中选择“边框和...

韩斧俗1381添加蓝色阴影边框蓝色指的是文字设置成蓝色??? -
黄音促18066544764 ______ 不是的,是把字的边设置成蓝色阴影的

韩斧俗1381请问用word怎么设计出这种蓝色条纹的边框啊急需急需 -
黄音促18066544764 ______ 1、先打开需要设置背景颜色的word文档,打开之后可以看到在工具栏有一个“格式”选项,单击该选项,会看到该选项还会下面的选项. 2、在下面的选项里,我们将鼠标移到“背景”又会下拉选项,这时我们就可以选择我们喜欢的颜色作为...

韩斧俗1381如何给段落添加边框和底纹 -
黄音促18066544764 ______ 1.段落的边框和底纹把光标定位到要设置的段落中,打开“格式”菜单,打开“边框和底纹”对话框,选择“方框”,在“线型”列表框中选择虚线,单击“颜色”下拉列表框中的箭头,从弹出的面板中选择“蓝色”,然后在这个“应用范围...

韩斧俗1381怎么让microsoft word 反白黑色变蓝色? -
黄音促18066544764 ______ 选择文字,格式--边框和底纹,打开对话框;单击“底纹”选项卡,进行以下设置:左边选择一种颜色(如黑色),右边应用于“文字”;确定.保持文字的选定状态,格式--字体,把文字颜色设置为“白色”.

韩斧俗1381在WORD中如何添加带沟框 -
黄音促18066544764 ______ 在WORD中如何添加带沟框的输入方法有: 方法一: 1、单击插入---->符号---->其它符号,如图所示; 2、弹出符号对话框,插入如图所示的符号即可. 方法二: 1、输入√并选中它; 2、单击开始----带圈字符按钮,如图所示; 3、弹出带圈字符对话框,在样式处选择增大圈号;在圈号处选择方框,如图所示.

韩斧俗1381在word里,如何设置红色和蓝色双下划线?
黄音促18066544764 ______ 不知道题主想要的是下图中哪一种下划线效果?常规的下划线设置方法先选中文字,然后右键一下,点击“字体”.在“下划线线型”下拉菜单中选择双下划线,接着在“下划线颜色”下拉菜单中选择红色或蓝色,就可以得到双红色下划线(双蓝色下划线).如果不设置下划线的颜色,下划线将和文字保持一样的颜色.除了双下划线,你也可以选择波浪线、虚线等.一红一蓝下划线的设置方法字体设置窗口的双下划线颜色是相同的,如果你一定要两个颜色不同的下划线,那就只能插入“形状”选项下的直线了.点击直线之后,拖动鼠标画出一条线,然后选中这条线,右键一下,将边框修改为蓝色.接着在插入一条红色的线.最后把两条线移动到合适的位置即可.谢谢阅读,欢迎点赞、评论、关注和点击头像.

（编辑：自媒体）