Richer input and navigation

SwiftUI forms: Slider

Learn how to use the Slider control in SwiftUI to let users drag to pick a value, setting its value, in range, and step parameters to control the range.

8 minute lesson

~~~

The Slider form control in SwiftUI lets us create a bar that the user can swipe left or right to decrease or increase its value.

We initialize a Slider by setting 3 parameters: value, in, step:

@State private var age: Double = 0

//...

Slider(value: $age, in: 0...100, step: 1)

in limits the minimum and maximum values we can use.

step means we can step by a value of 1 at a time, in this case we can go from 0 to 1 to 2 etc. You could use 10, or 0.2, and so on.

Since Slider takes a Double value, by default we increment the decimals too.

Example:

struct ContentView: View {
    @State private var age: Double = 0
    
    var body: some View {
        Form {
            Slider(value: $age, in: 0...100, step: 1)
            Text("\(age)")
        }
    }
}

iPhone simulator showing SwiftUI form with slider at minimum position displaying value 0.000000

iPhone simulator showing SwiftUI form with slider partially moved displaying value 34.000000

Notice how I added a Text view to show the value of age.

Since it’s a double, we have lots of decimals.

We could format that, but for this we’ll have another post.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →