Example: Creating a slider

- [Instructor] We can use our widget properties to create a lot of different dynamic interactions in our prototypes. In this video, we'll be using the width, height, and some of our position properties to create a working, drag-able slider control. I've got my audio app exercise file open here and before we get started, I'll just mention that this particular file is sized for the iPhone 7 because that's the phone I happen to own. Because it was created for the iPhone's retina screen, everything in this file is twice its normal size. So if you're viewing it on a desktop or a laptop in your browser window, everything is going to look really big.

I'm also using Apple's San Francisco font in this file. If you'd like to get that font for yourself, you can download it from Apple at developer.apple.com/fonts. But you don't really need to worry about it for this exercise. It's not going to matter for the slider control that we'll be creating. All right, so you can see that here in my audio app, I've got a volume control down here. What we're going to do is make it so that this volume slider is drag-able. When we drag the control, we want the blue bar over here to resize as we drag, so that it looks like the volume is actually changing.

The first thing we'll need to do is actually set up the drag interaction for our circle here. When I click this circle and go to the Properties menu, I don't have any drag-related events here right now. That's because right now, this is just a plain circle widget and regular widgets like circles and rectangles don't have any drag interactions available. To make it drag-able, I'll right-click and convert it to a dynamic panel and I'll call it Volume Control. Now that our circle is inside a dynamic panel, I've got some drag events that I can use here.

I'll click to add an OnDrag event and when we drag, we wanna move the volume control button. So I'll add a Move action and select our volume control here. We only want our volume slider to move horizontally. We don't want it to move vertically at all. So I'll select with drag x and that will restrict it, so that it can only move left and right. I'll click OK and preview now. And because this prototype is sized for the iPhone, I'm actually going to just zoom out in my browser window, so that I can see the prototype preview.

Now that we've set up that drag interaction, we can drag our slider control. But we can actually drag it right off of the volume bar, so we need to add some boundaries. To set up the boundaries we need, I'll go back in and edit our case. And I'll click Add Boundary. For the left side, we need to make sure that the x coordinate of our volume control is greater than the x coordinate for the left side of our bar. So I'll leave it as, is greater than, and then click our function button here. I'll delete this zero and then what we'll need to do is add a new local variable for our volume bar.

That rectangle is just called Volume Bar, so I'll select it here and I'll rename the variable Bar. Now that I've got that local variable, I can select it from the list and I have a couple of options. I can either type bar.x or I can type bar.left. Either one of them will work to get the x coordinate for the left-side of that volume bar. Then once I click OK, that will keep our volume control from dragging off the left-side of the bar. Now, I just need to add another boundary for the right. And this time, we wanna keep that coordinate less than the right-side of our volume bar.

So I'll click the function button again and do the same thing. I'll select our Volume Bar widget and rename our variable Bar. And then here, now, I can type in the double brackets, bar.right. That's gonna keep it from dragging off the right-side of our bar. So now, when I click OK and preview again, I can't drag that control off of the bar anymore. But I also can't quite drag it over the bar, so it never looks like I can quite get it to zero or quite get it to full volume.

When I'm dragging my volume slider control, I actually wanna make it look like about half of this volume control can drag off of the side of the bar here. That's what's gonna make it look like I can get it all the way to zero. So to edit those boundaries, I'll click to edit the left one first. What I need to do is subtract about half the width of that volume control. Remember that the volume control is the widget being moved here, so I don't actually have to define a local variable for it. I can use target.width and that's gonna give me the width of our little circle control.

So here, in our expression, if I subtract target.width divided by two, that's gonna make it look like half of that control can drag off the left-side of the bar. And over here on the right, if I add target.width divided by two, that'll do the same thing on the right side. So when I click OK and preview now, now, it looks like my control goes all the way to the left and all the way to the right. The last thing we wanna do is make it so that this blue bar changes width as we're dragging our slider control, so that it looks like the volume's actually changing.

So we'll click to get back into our case here and this time, we'll add a new Set Size action. We need to select that blue bar, it's called Volume. So I'll come over here on the right and select Volume. And then down here, we need to figure out what we want the width and the height to be. The height's the easy one. We don't want the height to change, so we can either blank that out and it leave completely blank, or we can use target.height to keep it the same. Now, let's focus on the width. I'll click the FX button and delete that 226 that's in here. And the width that we wanna change it to here is actually going to be the difference between the x coordinate of our volume control here and the x coordinate for the left side of our volume bar.

If we subtract those two things, that's going to give us the total width that we need for that blue volume bar there. So I'll add a local variable for our volume control. Now, I'll call it Control. And then I'll add another local variable for our volume bar. And I'll call that one Bar. And then up here, I can enter my expression, which is going to be control.x minus bar.x. I could also use control.left minus bar.left. That would be exactly the same thing.

Now, when I click OK and preview, you can see that our volume control moves and also, our bar is changing size, so it looks like our control really works now. So that's how we can create a dynamic interactive slider control using some of our widget variables.