Slider in SwiftUI

DevTechie Inc
Jan 15, 2023

SwiftUI’s Slider control lets the user select value from a bounded range. Slider view provides range from 0.0 to 1.0 by default but it can be changed to custom values using overloaded initializers.

Slider can be used with any type as long as it conforms to the Stridable protocol.

Stridable protocol is a type representing continuous, one-dimensional values that can be offset by stepping through and measured.
Slider view has a circular thumb, which is used to step through the bounded value. Example will help us understand the concept better so let’s get coding.

We will create a State variable and bind it to the Slider.

struct DevTechieSliderExample: View {
    @State private var value = 0.2
    var body: some View {
        NavigationView {
            VStack {
                Slider(value: $value)
                Text("Current value \(value)")
            }
            .padding()
            .navigationTitle("DevTechie")
        }
        
    }
}
We can format number using formatted function

Text("Current value \(value.formatted(.percent))")
We can provide range of values to set min and max values for Slider.

Slider(value: $value, in: 0...100)
Let’s also update example to use NumberFormatter to remove fraction digits.

let numberFormatter: NumberFormatter = {
    let num = NumberFormatter()
    num.maximumFractionDigits = 0
    return num
}()
Next, we will update our Text view as well to use this NumberFormatter.

Text("Current value: \(numberFormatter.string(from: NSNumber(value: value))!)%")
Complete example:

struct DevTechieSliderExample: View {
    @State private var value = 0.2
    
    let numberFormatter: NumberFormatter = {
        let num = NumberFormatter()
        num.maximumFractionDigits = 0
        return num
    }()
    
    var body: some View {
        NavigationView {
            VStack {
                Slider(value: $value, in: 0...100)
                Text("Current value: \(numberFormatter.string(from: NSNumber(value: value))!)%")
            }
            .padding()
            .navigationTitle("DevTechie")
        }
        
    }
}
Let’s say that we want to increment by 5 instead of 1 number each time slider value changes, for that use case we can set step parameter to provide guidance on number increment strategy.

Slider(value: $value, in: 0...100, step: 5)
We can add custom labels for minimum and maximum values in Slider view. We just have to add minimumValueLabel, maximumValueLabel and label as shown below:

Slider(value: $value, in: 0...100, step: 5, minimumValueLabel: Image(systemName: "light.min"), maximumValueLabel: Image(systemName: "light.max"), label: {})
We can set tint color for the slider with tint modifier

Slider(value: $value, in: 0...100, step: 5, minimumValueLabel: Image(systemName: "light.min"), maximumValueLabel: Image(systemName: "light.max"), label: {}).tint(.orange)
Setting foreground color doesn’t change the slider thumb but it has effect on labels.

Slider(value: $value, in: 0...100, step: 5, minimumValueLabel: Image(systemName: "light.min"), maximumValueLabel: Image(systemName: "light.max"), label: {}).foregroundColor(.pink).tint(.orange)
Complete code:

struct DevTechieSliderExample: View {
    @State private var value = 20.0
    
    let numberFormatter: NumberFormatter = {
        let num = NumberFormatter()
        num.maximumFractionDigits = 0
        return num
    }()
    
    var body: some View {
        NavigationView {
            VStack {
                Slider(value: $value, in: 0...100, step: 5, minimumValueLabel: Image(systemName: "light.min"), maximumValueLabel: Image(systemName: "light.max"), label: {})
                    .foregroundColor(.pink)
                    .tint(.orange)
                Text("Current value: \(numberFormatter.string(from: NSNumber(value: value))!)%")
            }
            .padding()
            .navigationTitle("DevTechie")
        }
        
    }
}
With that we have reached the end of this article. Thank you once again for reading. Don’t forget to follow 😍. Also subscribe our newsletter at https://www.devtechie.com
Like