[SwiftUI] How to Change Text Size with a Slider in SwiftUI

Hey everyone! Today I'll show you how to change text size with a Slider in SwiftUI. This is especially handy when you need to display a numeric value in your UI.

How does it work?

First, create a Slider view and bind its value parameter to a variable representing the text size (here, textSize). Then use the Slider's in parameter to define the range for that size.

Slider(value: $textSize, in: 32...200, step: 1)

This lets textSize range anywhere from 32 to 200.

Next, use the Text view's font modifier to change the text size. Specifically, pass .system(size:) to the font modifier, with the size argument set to the variable representing the text size (again, textSize).

Text("Hello, SwiftUI")
    .font(.system(size: textSize))

With this code, the text size updates in real time as textSize changes.

Hiding the decimal places

Use the Text view's specifier parameter to control the number format. Specifically, passing %0.f lets you hide any decimal places.

Text("\(textSize, specifier: "%0.f")")
    .foregroundColor(.blue)

This converts the value of textSize into a string while suppressing the decimal portion.

Wrap-up

And that's how you can use a Slider in SwiftUI to change text size.