Tutorials ∙ 6 min read

Design a Circular Slider Using Masks and Chain

By controlling a knob, users are able to change the value on a circular slider and see changes in a corresponding percentage value.

Cal Brackin, UX Design Student @ University of Colorado-BoulderSeptember 16, 2021

Introduction

Sliders allow users to control an element, such as a knob, in order to select a value in a range of options. For best practice, it is suggested to use sliders when a precise value doesn't matter and instead allow users to select for an approximate range. In this case study, you'll be creating a circular slider that users control using a knob, which is linked to a corresponding percentage visualization.

ProtoPie makes this effect easy to achieve by using chain and variable elements. With a chain, you are able to make changes to the property of one layer (the knob's rotation) to change the property of another layer (the active area of the slider). Using a variable, ProtoPie will calculate the knob's rotation so you can use that information to change the displayed percentage value.

What you will learn

Make the knob draggable
Reveal the active part of the slider using mask and chain
Make the text value correspond to the knob's rotation

In the end, you’ll be able to make something like this!

Circular Slider Prototype Made With ProtoPie

Starting Pie FileCompleted Pie File

Step-by-step instructions

1. Make the Knob draggable

　1. To start, create a container the same size as the radial dial. Drag the knob object into the container and rename the container, Knob Container.

　2. Change the Knob Container's origin to the center.

　3. With the Knob object selected, add a Drag trigger. Select the Knob Container and add a Rotate response. You can now rotate the knob perfectly around the radial dial in your preview!

💡 Note: There is another way of making the Knob draggable in a circular slider, but it is less efficient so we suggest our method in this lesson. For your information on the alternative way, you can change the Knob's origin to be in the center of the component and create a rotate function. In ProtoPie, values of the origin are percentage and limit easy accuracy in this case. It takes trial and error to get the knob to rotate around the radial dial perfectly so we prefer our suggested method.

2. Reveal the active part of the slider using Mask and Chain

Part 1: Setting up the masks

In these steps, you will use masks to begin setting up the reveal of the active part of the slider as the knob moves along.

　1. To start, create two shape halves that split the circle vertically and place them on the left and right halves. You can look at the sizes of the left and right images to get the correct measurements (128x256). You are creating two halves because the split of the halves bisect the knob and as the knob rotates the halves also rotate to reveal the active part.

　2. With the right-half image, you are going to place it within a mask that is on the left side. Drag the left-side, shape half under the right image, and with the shape half selected, select Use as Mask. Remove the fill of the shape layer.

Place the image within a mask that is on the left side.

　3. Notice that all the layers above your elements are also masked. Instead, you want to select the right image and left mask and put them in their own container.

Select the right image and left mask and put them in their own container

　4. Put the left image into a container with the right shape layer and create a mask.

　5. Container 1 corresponds to the right side and Container 2 corresponds with the left side. (Rename these elements to correspond to the right and left for clarity.)

Part 2: Setting up the chain

In these next steps, you are going to chain the rotation of the masks to the rotation of the knob container to create the active reveal.

　1. First, select the Left Mask and set the origin to be on the center-left (or directly in the middle of the circular slider). Repeat for the right shape mask so the origin is directly in the middle of the circular slider.

　2. Create a chain to the Knob Container's Rotation.

　3. For the reveal on rotation, will start with the right half because it will reveal first as the knob moves along. Select the Left Mask and add a rotate. Type in the values so all they go from 0 to 180.

Select the Left Mask and add a rotate. Type in the values so all they go from 0 to 180.

　4. Select the Right Mask and add a rotate. For the ranges it will be from 180 to 360 for the Rotation, and from 0 to 180 for the Angle.

　5. Let's take a look in the preview window.

Reveal the active part of the slider using mask and chain

3. Make the text value correspond to the knob's rotation

　1. Create a variable and you can rename this to value. With this variable selected, add Assign to the Chain. Change the variable to the value variable, which will assign values based on the value of the container. Change the range on the Rotation from 0 to 360 and the Value from 0 to 100.

　2. You can click on the debugger icon to see if the value is changing. Open the preview window and try dragging — you should be able to see the value changing as you drag. You will notice that you're seeing the value include two decimal places. Don't worry, we'll address this in the next step.

You should be able to see the value changing as you drag

　3. Create a Detect trigger linked to the value variable. Create a Text response linked to the text Value. Change the content to formula. The formula you will use is round(value)+"%" This will remove the decimal points and round to the nearest whole number.