SwiftUI: How to get continuous updates from Slider

In SwiftUI, you can bind UI elements such as slider to properties in your data model and implement your business logic there.

For example, to get continuous slider updates:

import SwiftUI
import Combine

final class SliderData: BindableObject {

  let didChange = PassthroughSubject<SliderData,Never>()

  var sliderValue: Float = 0 {
    willSet {
      print(newValue)
      didChange.send(self)
    }
  }
}

struct ContentView : View {

  @EnvironmentObject var sliderData: SliderData

  var body: some View {
    Slider(value: $sliderData.sliderValue)
  }
}

Note that to have your scene use the data model object, you need to update your window.rootViewController to something like below inside SceneDelegate class, otherwise the app crashes.

window.rootViewController = UIHostingController(rootView: ContentView().environmentObject(SliderData()))

enter image description here


In Version 11.4.1 (11E503a) & Swift 5. I didn't reproduce it. By using Combine, I could get continuously update from slider changes.

class SliderData: ObservableObject {

  @Published var sliderValue: Double = 0
  ...

}

struct ContentView: View {

  @ObservedObject var slider = SliderData()

  var body: some View {
    VStack {
      Slider(value: $slider.sliderValue)
      Text(String(slider.sliderValue))
    } 
  }
}  


We can go without custom bindings, custom inits, ObservableObjects, PassthroughSubjects, @Published and other complications. Slider has .onChange(of: perform:) modifier which is perfect for this case.

This answer can be rewritten as follows:

struct AspectSlider2: View {

    @Binding var value: Int
    let hintKey: String
    @State private var sliderValue: Double = 0.0

    var body: some View {
        VStack(alignment: .trailing) {

            Text(LocalizedStringKey("\(hintKey)\(value)"))

            HStack {
                Slider(value: $sliderValue, in: 0...5)
                    .onChange(of: sliderValue, perform: sliderChanged)
            }
        }
    }

    private func sliderChanged(to newValue: Double) {
        sliderValue = newValue.rounded()
        let roundedValue = Int(sliderValue)
        if roundedValue == value {
            return
        }

        print("Updating value")
        value = roundedValue
    }
}

After much playing around I ended up with the following code. It's a little cut down to keep the answer short, but here goes. There was a couple of things I needed:

  • To read value changes from the slider and round them to the nearest integer before setting an external binding.
  • To set a localized hint value based on the integer.
struct AspectSlider: View {

    // The first part of the hint text localization key.
    private let hintKey: String

    // An external integer binding to be set when the rounded value of the slider
changes to a different integer.
    private let value: Binding<Int>

    // A local binding that is used to track the value of the slider.
    @State var sliderValue: Double = 0.0

    init(value: Binding<Int>, hintKey: String) {
        self.value = value
        self.hintKey = hintKey
    }

    var body: some View {
        VStack(alignment: .trailing) {

            // The localized text hint built from the hint key and the rounded slider value.
            Text(LocalizedStringKey("\(hintKey).\(self.value.value)"))

            HStack {
                Text(LocalizedStringKey(self.hintKey))
                Slider(value: Binding<Double>(
                    getValue: { self.$sliderValue.value },
                    setValue: { self.sliderChanged(toValue: $0) }
                    ),
                    through: 4.0) { if !$0 { self.slideEnded() } }
            }
        }
    }

    private func slideEnded() {
        print("Moving slider to nearest whole value")
        self.sliderValue = self.sliderValue.rounded()
    }

    private func sliderChanged(toValue value: Double) {
        $sliderValue.value = value
        let roundedValue = Int(value.rounded())
        if roundedValue == self.value.value {
            return
        }

        print("Updating value")
        self.value.value = roundedValue
    }
}

Tags:

Ios

Swift

Swiftui