滑块让用户可以通过移动一个控件（如旋钮）在范围内轻松调整数值。当你不需要精确数字、只需大致选择时，它非常适合。
在本教程中，你将学习如何创建一个圆形滑块，用户可以控制旋钮来调整百分比显示。ProtoPie 通过 Chain 触发器和变量元素简化了这一过程。Chain 触发器可以将旋钮的旋转与滑块的活动区域关联起来，而变量可帮助计算旋转角度，从而更新显示的百分比值。
让我们开始动手搭建吧！
概览
步骤 1：让旋钮可拖动
步骤 2：使用蒙版和 Chain 触发器显示滑块的活动部分
步骤 3：让文本数值与旋钮旋转对应
最后，你将能够做出像这样的效果👇
步骤 1：让旋钮可拖动
首先，创建一个与径向表盘大小匹配的容器。然后，将 Knob 对象拖入该容器，并将其重命名为“Knob Container”。
将 Knob Container 的原点更改为中心。
选中 Knob 对象后，添加一个 Drag 触发器。选择 Knob Container 并添加一个 Rotate 响应。现在你可以在 Preview 窗口中让旋钮围绕径向表盘完美旋转。
💡 注意：还有另一种方式可以让圆形滑块中的 Knob 对象可拖动，但效率不如本课使用的方法。
另一种方法是将 Knob 的原点改到组件中心并使用 Rotate 响应。不过在 ProtoPie 中，原点数值以百分比设置，这会使精确定位变得困难。通常需要反复试错才能让 Knob 对象完美绕表盘旋转，因此我们推荐本教程中介绍的方法。
步骤 2：使用蒙版和 Chain 触发器显示滑块的活动部分
在接下来的步骤中，你将使用蒙版，开始设置随着旋钮移动而显示滑块活动部分的效果。
第 1 部分：设置蒙版
首先，创建两个将圆形垂直分割的半边形状，并分别放置在左半边和右半边。你可以参考左右图像的尺寸来获得正确测量值（128x256）。之所以创建两个半边，是因为它们的分割线会平分旋钮，随着旋钮旋转，这两个半边也会旋转，从而显示活动部分。
你需要将右半边图像放在左侧的一个蒙版内。将左侧半边形状拖到右侧图像下方，选中该半边形状后，选择“Use as Mask”。移除该形状图层的填充。注意，你元素上方的所有图层也会被蒙版影响。你需要改为选中右侧图像和左侧蒙版，并将它们放入各自的容器中。
将左侧图像与右侧形状图层放入一个容器中，并创建蒙版。
第 2 部分：设置 Chain 触发器
在接下来的步骤中，你将把蒙版的旋转与旋钮容器的旋转进行链式关联，以创建活动区域显示效果。
选择Left Mask并将原点设置为左中（或圆形滑块的正中间）。对 **Right Mask **重复此操作，使其原点也位于圆形滑块正中间。
给 Knob Container 的 Rotation 添加一个 Chain 触发器。
在旋转显示效果中，会先从右半边开始，因为随着旋钮移动它会先显示。选择Left Mask，并在 Chain 触发器中添加 Rotate 响应。输入数值，使其范围都从 0 到 180。
选择Right Mask，并将 Rotate 响应关联到 Chain 触发器。旋转范围为 180 到 360，角度范围为 0 到 180。
让我们在 Preview 窗口中看一下效果。
步骤 3：让文本数值与旋钮旋转对应
创建一个变量并命名为value。选中该变量后，将Assign添加到Chain。把变量改为value变量，它会根据容器的值进行赋值。将Rotation范围从0到360，并将Value从0到100。
你可以点击调试器图标查看值是否变化。打开Preview window并尝试拖动——你应该能看到拖动时数值在变化。你会注意到该值包含两位小数。别担心；我们会在下一步处理这个问题。
创建一个与value变量关联的Detect触发器。创建一个与文本Value关联的Text响应。将内容改为公式。你将使用公式
round(value)+"%"。这会移除小数点并四舍五入到最接近的整数。
💡 round(): 返回一个数字的四舍五入值。
round(source:NUMBER)→ NUMBER
恭喜！
很棒，你已完成本教程！希望你喜欢为精彩的 ProtoPie 项目创建圆形滑块。我们很想看到你的创意实验。创建你自己的原型，并在 X 或 Instagram 上使用 #MadeWithProtoPie 分享。
