音量、亮度和进度设置里经常用到滑块。做原型时，滑钮的位置能让人看出调到了大概哪个区间，旁边的数字则能显示当前是30、50还是80。数字还要跟着拖动过程更新，用户才能在松手前找到想要的值。用ProtoPie Studio做这类交互，可以把滑钮的移动范围和显示数值分开设置。这样，即使后来改了轨道长度，滑块也能继续使用原来的数值范围。
一、ProtoPie怎么做滑块
一个基础的横向滑块由轨道和滑钮组成。下面用同一场景中的两个图层制作滑块，滑钮中心从横坐标40移动到240，操作项按ProtoPie Studio英文界面标注。
1、摆放轨道和滑钮
①在场景中添加一个圆角矩形，命名为【Track】，将左边缘放在横坐标40处，宽度设为200像素。
②添加一个直径为20像素的圆形，命名为【Knob】，将它放在【Track】上方。两个图层放在同一层级。
③选中【Knob】，将【Origin】设在中心，再把【X】设为40，并让滑钮中心与轨道的水平中线对齐。
滑钮以中心为原点后，横坐标表示圆心的位置。本例把圆心的两个端点对准轨道的左右边缘，所以圆形在端点会露出半个滑钮。如果设计要求整个圆形留在轨道以内，就要把左右端点各往里收一个半径，并用收进后的坐标计算数值。
2、添加横向拖动交互
①选中【Knob】，在交互面板中添加【Drag】触发器，确认触发目标是滑钮。
②在【Drag】下添加【Move】响应，将响应目标同样设为【Knob】，移动方向选择【Horizontal】。
③在【Move】的【Limit】中选择【Custom Limit】，将【Min X】填为40、【Max X】填为240。
④打开【Preview】，从滑钮上按住并向两侧拖动，检查滑钮能否在两个端点停住，再上下移动指针，确认滑钮仍沿水平方向移动。
二、ProtoPie滑块数值怎么实时显示
滑钮的横坐标是像素位置。要显示0到100，可以用滑钮当前位置减去左端坐标，再除以可移动距离。以本例为例，滑钮中心到达横坐标140时，正好走过一半，数值应显示为50。
1、监听滑钮横坐标并更新数字
①添加一个文本图层，命名为【ValueLabel】，放在轨道上方，初始文字输入【0】。
②在交互面板中另加一个【Detect】触发器，将目标设为【Knob】，监听属性选为【X】。
③在【Detect】下添加【Text】响应，将响应目标设为【ValueLabel】。在内容设置中选择【Formula】，输入【round((layer("Knob").x-40)/(240-40)*100)】。
④打开【Preview】，将滑钮依次拖到左端、中间和右端，核对文字是否分别显示【0】【50】【100】，并在拖动过程中观察数字是否持续变化。
公式里的40是左端坐标，240减40是实际行程。`round()`会把换算结果四舍五入为整数，适合音量或亮度一类读数。如果原型要展示精细调节，可以按设计要求保留小数。
2、让默认位置和初始读数对应
【Detect】在横坐标变化时才触发。如果滑钮从轨道中间开始，文本还沿用左端的初始值，预览刚打开时就会出现位置和数字对不上的情况。
①若希望默认值为25，在编辑画布上选中【Knob】，将【X】设为90。
②选中【ValueLabel】，将初始文字改为【25】，保留【Detect】下的【Text】公式。
③重新打开【Preview】，先核对未拖动时的读数，再将滑钮向左右两侧移动，检查默认位置是否影响端点读数。
三、ProtoPie滑块拖动和显示不同步怎么排查
滑钮和数字可以分开测试。滑钮走不到端点时，先查坐标和移动限制。滑钮移动正常、数字却停在原地时，再检查监听目标和文本响应。
1、轨道改宽后同步更新坐标
①选中【Track】，确认它的左边缘坐标和新宽度。例如左边缘仍为40、宽度改为300像素时，右边缘就是340。
②打开【Knob】的【Move】响应，将【Min X】与【Max X】更新为40和340。
③打开【Text】响应，将【Formula】改为【round((layer("Knob").x-40)/(340-40)*100)】。
④返回【Preview】，核对滑钮在两个端点仍显示【0】和【100】，到达新轨道中点时显示【50】。
调整轨道的外观后，移动范围和换算公式需要使用同一对端点。只改其中一处，就可能出现滑钮已经到头、数字还没到100，或者滑钮尚未走完整段、数字已经超过100的情况。
2、定位数字停住或不更新的问题
①若滑钮能动但数字不变，选中【Detect】，核对监听目标是否为【Knob】，监听属性是否为【X】。
②展开其下的【Text】响应，核对目标是否为【ValueLabel】，并确认内容模式为【Formula】。
③若复制过滑块或改过图层名，检查公式中的【layer("Knob").x】是否引用当前滑钮。给同一场景里的不同滑钮取不同名称，再到【Preview】中分别拖动验证。
总结
滑块是否好用，可以从拖动手感和读数两方面看。滑钮能到达预期位置，数字能在拖动中及时变化，使用者才容易停在想要的数值上。若同一项目里还要制作音量、亮度等多个滑块，可以沿用这套交互，再分别设定行程、初始值和显示精度，后续改版时也容易核对。
