Slider Control

In this code-along we will create your second app, a slider app, that:

• includes a title.
• displays a resizable circle.
• adds a slider to control the circle’s size.

We want everything vertically aligned for a clean and simple design.

Let’s get started!

Step 1: Set up your project

1. Open Xcode: Launch Xcode and select Create a new Xcode project.
2. Choose Template: Select App under the iOS tab and click Next.
3. Name Your Project: Enter a name for your project, like Counter. Choose SwiftUI for the interface and Swiftfor the language. Click Next, and then save your project.

When you open your project, you’ll see the already familiar standard code presenting a globe and the Text “Hello, world!”

Step 2: Replace the default layout

You have already seen in your first app “Button Animation” that a VStack places elements vertically on the view. Since we want to have our elements vertically, we embed them into a VStack. Therefore, to start, delete everything within the VStack, i.e. delete:

Image(systemName: "globe")
	.imageScale(.large)
	.foregroundStyle(.tint)
Text("Hello, world!")

Step 2: Add a title

Inside the VStackwe’ll start with the title.

Text("Slider Control")
	.font(.title.bold())

This puts our title on to the view – the text size can be changed by the modifier .fontand by setting it to .title we put it to the title font size. .boldmakes it – as you suspect – bold.

Step 3: Add a circle

To add a circle – let’s say in orange – we add inside the VStack:

Circle()
	.fill(Color.orange)
	.frame(width: 50, height: 50)
	.padding()

This creates an orange circle of fixed size 50. We achieve the resizing of the circle by putting it into a frame of size 50x50. .padding()creates a top, bottom, left and right padding around the circle – it looks visually more appealing.

Step 4: Make the circle resizable

Now we have our circle but we want to dynamically change the size of the circle i.e. we need a variable that holds the size of the circle. Variables are useful when you expect the value to change during its lifetime. In contrast to variables, a constant is similar to a variable, but the value you assign to it cannot be changed once it’s set. A constant is created by the using the keyword let, a variable is created by using the keyword var.

Just before var body: some Viewinclude the following:

@State private var circleSize = 50.0

What does this mean? It defines a variable circlethat stores the size of the circle, starting with a default size of 50. The keyword privatemeans that the variable circleSize can only be accessed inside this specific file (or struct). This keeps the variable local to the view. @Statetriggers that this variable is being monitored and if the value changes, the view will be updated. And this is exactly what we want – if we change the variable that holds the size, we want the circle to change to that size. Please note that we have to define the circleSize as a Float (i.e. put 50.0 instead of 50).Te

Therefore, please change the Circlecode to

Circle()
	.fill(Color.orange)
	.frame(width: circleSize, height: circleSize)
	.padding()

Step 5: Add a slider

To change the variable that holds the circle size, please add below the Circlecode:

Text("Adjust the size of the circle:")

Slider(value: $circleSize, in: 5...200)
	.tint(.orange)
	.padding()

This creates a slider that adjusts circleSize between 5 and 200 i.e. to have a minimum size of 5and a maximum size of 200. By adding $in front of the circleSizevariable, we bind the slider with circleSizewe use to draw our circle. By adding the modifier .tint(.orange)we change the slider’s accent color to orange.

And here you go! It is already working! On the right hand size of your XCode window you see the canvas with a preview. You can adjust the slider, and the size of the circle changes! But wait what? The title and the slider move up and down depending on the circle size. That’s because we directly put all elements underneath each other.

Step 6: Fix the layout

It will look much better if we put the circle in a fixed frame so that also the title and the slider stay at the same place independent of the circle’s size. Therefore please add another frame to the circle:

Circle()
	.fill(Color.orange)
	.frame(width: circleSize, height: circleSize)
	.frame(width: 220, height: 220)
	.padding()

One more thing: The whole content of the view is currently vertically centrally aligned. You could do that. However, it looks nicer when starting at the top. You can achieve this very easily by adding

Spacer()

directly after the Slider() – just before the closing bracket of the VStack. A Spacer() is an invisible, flexible space that pushes content away. Adding it here moves everything upward, giving the app a cleaner look.

Now that your app layout is polished, it’s time to see it in action!

You see already a preview of your app on the right-hand side in the canvas. To run your app in the simulator, please select a device at the very top-middle of the XCode window – you can also add your own physical device – and press the Play button (the right-pointing triangle). And here you can adjust the slider to see the circle resize dynamically.

Congratulations!

You’ve successfully built a Slider App! 🎉

What you have learned

In this code-along, you’ve learned:

• How to create a layout using VStack to arrange elements vertically in your app.
• The difference between a variable var and a constant let and how to define each in Swift.
• How to use @State to manage dynamic values and make your UI interactive, with automatic updates when the state changes.
• How to use a Text view to display content and apply modifiers like .font and .bold to customize its appearance.
• How to create a Circle shape and style it using .fill() and .frame() to define its color and size.
• How to add a Slider and bind it to a @State variable to create real-time updates.
• How to use modifiers like .tint and .padding to enhance the appearance and layout of your views.
• How to use Spacer() to control spacing and align content at the top of the screen.
• How to preview your app in Xcode’s canvas and run it in a simulator or on a physical device.

Keep learning, keep building, and let your curiosity guide you. Happy coding! ✨

“Stay hungry. Stay foolish.” — Steve Jobs

Download the full project on GitHub: https://github.com/swiftandcurious/SliderControl

Watch the full code-along