Slider in SwiftUI

In this tutorial, you are going to learn about Slider in SwiftUI. It allows a developer to create a bar that the app user can swipe left and right to decrease or increase its value.

A Slider is actually a control to let the user select value within the range specified in the Slider structure.

You can think of a SwiftUI Silder as an input. You just have to swipe instead of inserting the value. To store the value, you have to bind it to a state variable.

Syntax of a Slider

Below is the syntax of a Slider in SwiftUI:

Slider(value: $defaultValue, in: LOWER_VALUE...UPPER_VALUE, step: STEP_VALUE)

$defaultValue

As you can see in the above syntax, $defaultValue is the default value of the slider on starting the app. It binds to a state variable.

LOWER_VALUE and UPPER_VALUE

The LOWER_VALUE is the start value or minimum value of the slider range and the UPPER_VALUE is the maximum value of the range.

step

The step parameter is optional. It provides incremental and decremental steps along with the slider. That the minimum changes of value always be equal to the step value. It indicates, how much the value will change when the user moves the slider to the right or left. For example, if you have the range from 0 to 100 and the step value is 5, it will return values 0, 5, 10, 15, 20, 25 and so on during swiping the slider.

Example of Slider

Below is given an example of creating a slider in SwiftUI:

    @State private var volume: Double = 10
    
    var body: some View {

        
        VStack {
            
            Slider(value: $volume, in: 0...100, step: 1)
            
            // Show the Slider value in Text view
            Text("\(volume)")
            
        }
        
    }

If we run it in our device or simulator, it will show a slider with the default value 10 like you can see below:

If we move the slider to right or left, it will change the value.

In our code, we have created a state variable of float type which is volume. We bind our slider to this state variable.

We have also used a Text view to show the slider value on the screen. For this reason, it shows us the changing value while we swipe our slider.

By Faruque Ahamed Mollick