Michael
Michael

Reputation: 392

How to remove Steps in Slider SwiftUI

I created a UISlider via SwiftUI, but there are just too many "step marks" along the track, which doesn't have the "look and feel" I wish to achieve. Anyone knows the trick to remove them other than turning the tint color to black?

It seems that the step/tick marks are always there as long as I pass any step values during UISlider initialization.

struct setLoggingView: View {
    
    @State var suitability: Int
    @State var elapsedRestTime: Double
    var totalRestTime: Double
    var stepValue: Int

    var body: some View {
        
        GeometryReader { geometry in
            
            ScrollView {
                
                VStack {
                    
                    Text("Rested  \(Int(elapsedRestTime)) seconds")
                    
                    Slider(value: $elapsedRestTime,
                           in: 0...totalRestTime,
                           step: Double.Stride(stepValue),
                           label: {
                        Text("Slider")
                    }, minimumValueLabel: {
                        Text("-\(stepValue)")
                    }, maximumValueLabel: {
                        Text("+\(stepValue)")
                    })
                        .tint(Color.white)
                        .padding(.bottom)

                    Divider()

                    Spacer()
                    
                    Text("Restfullness")
                        .frame(minWidth: 0, maxWidth: .infinity)
                    
                    suitabilityStepper(suitability: restfullness)
                
                    Button(action: {
                        print("Update Button Pressed")
                    }) {
                        HStack {
                            Text("Update")
                                .fontWeight(.medium)
                        }
                    }
                    .cornerRadius(40)
                    
                }
                .border(Color.yellow)
            }
        }
    }
}

Upvotes: 0

Views: 1255

Answers (2)

Bryan
Bryan

Reputation: 5700

Until Apple improves SwiftUI, the way to do this is by providing a custom binding INSTEAD OF using the step parameter:

Slider(value: Binding(get: { dailyGoalMinutes }, 
                      set: { newValue in
                                let base: Int = Int(newValue.rounded())
                                let modulo: Int = base % 10     // Your step amount. Here, 10.
                                dailyGoalMinutes = Double(base - modulo)
                            }), 
                      in: 0...1440)

In this example, dailyGoalMinutes is declared on the view like this:

@State private var dailyGoalMinutes: Double = 180.0

The slider allows the user to select between 0 and 1,440 minutes (1 day) in 10-minute increments. While the slider itself won't snap to those increments while dragging, the value of dailyGoalMinutes will be properly constrained to multiples of 10 within the defined range.

(Note: AppKit behaves the same way; when NSSlider does not have any tick marks visible, the slider does not snap to values.)

Upvotes: 4

Michael
Michael

Reputation: 392

Tried research and asked a few mentors, but there seems to be no way to remove the steppers if you are using the default UISlider in SwiftUI. The only way is to create completely custom Slider, but I think I will just live with the default version.

Upvotes: 0

Related Questions