How to trigger a function when a Slider changes in SwiftUI?

Question

I'm trying to trigger the sliderchanged() function when the slider value changes, I might be missing something very basic but every similar thing I've found isn't working. Isn't there anything like "action" for the Slider or the old "ValueChanged" action?

Here's my code:

struct CustomSlider1: View {

    @State var progress: Float = 0.5
    var body: some View {

       VStack{
        Slider(value: $progress)
            .padding(.all)
            Text(String(progress))          
        }        
    }

    func sliderchanged() {
        //do things 
    }
}

Thanks!!

You can create an ObservableObject with an additional PassthroughPublisher as your bound variable in the slider. You can then attach an onReceive to the publisher and use it to invoke sliderChanged. Don't try objectWillChange as it is sent before that value is updated. — Michael Salmon, Oct 16 '19 at 04:50
@Gianclgar Welcome to StackOverflow! If an answer below helped you figure out a solution, you should accept it. That way, programmers with a similar problem will know what worked for you. — RPatel99, Oct 19 '19 at 20:55

RPatel99 · Accepted Answer · 2020-01-28T03:34:45.633

32

You can make a custom Binding that calls the function in the Binding's setter:

@State var progress: Float = 0.5
var body: some View {

   VStack{
       Slider(value: Binding(get: {
           self.progress
       }, set: { (newVal) in
           self.progress = newVal
           self.sliderChanged()
       }))
       .padding(.all)
       Text(String(progress))
    }
}

func sliderChanged() {
    print("Slider value changed to \(progress)")
}

edited Jan 28 '20 at 03:34

answered Oct 16 '19 at 15:48

RPatel99

7,448
2
37
45

1

Worked perfectly. Thanks! – Gianclgar Oct 21 '19 at 03:35
8

This is exactly what most people need when searching for the keywords that point them to the confusing Combine framework. Well done and thank you! – Teng L Dec 17 '19 at 03:53
2

Note this solution provides continuous updates as the slider thumb is moved. user3069232's solution below provides one update at drag start and a second at drag completion only. – Jason Campbell Sep 29 '20 at 09:07
one of the best and standard solutions is using Binding with a closure initializer. – omid shojaeyan Jul 11 '23 at 15:48

score 22 · Answer 2 · answered Mar 11 '20 at 19:09

22

Swift 5, iOS 13

Another option, simple using a State variables and a closure.

@State var alpha = 65
@State var alphaToShow = ""

Slider(value: $alpha, in: 65...90,step: 1,onEditingChanged: { data in
  self.alphaToShow = String(Character(UnicodeScalar(Int(self.alpha))!))
  // execute more code here
}
}).padding()
Text(alphaToShow)

answered Mar 11 '20 at 19:09

user3069232

8,587
7
46
87

I tested it, and it works perfectly. Don't know why it didn't get an upvote yet. Is also a simple solution. – Enrique Nieloud Jul 10 '20 at 20:57
3

Cause it is the third one in the list Enrique :) and many SO users sadly don't read beyond the green tick. – user3069232 Jul 12 '20 at 06:33
3

This solution is best if you only want an update after drag completion. If you want continuous updates the accepted answer is what you need. – Jason Campbell Sep 29 '20 at 09:09
@JasonCampbell or the one below with onChange. – Utkarsh Bhardwaj Jan 29 '22 at 18:27

score 5 · Answer 3 · answered Jan 23 '21 at 01:56

Yet another approach to get continuous updates using onChange modifier.

import SwiftUI

struct SliderOnChange: View {
    @State var progress: Float = 0.5

    var body: some View {
        VStack{
            Slider(value: self.$progress)
                .onChange(of: self.progress) { newProgress in
                    self.sliderChanged(to: newProgress)
                }
            Text(String(self.progress))
        }
    }

    func sliderChanged(to progress: Float) {
        print("Slider value changed to \(progress)")
    }
}

score 0 · Answer 4 · answered Sep 06 '22 at 13:30

More Combine way:

import Combine

class ViewModel: ObservableObject {

    @Published var sliderValue: Double = 0
    private var subscriptions = [AnyCancellable]()
    
    init() {
        $sliderValue.sink(receiveValue: {
            print("sliderValue: ", $0)
        }).store(in: &subscriptions)
    }
}

How to trigger a function when a Slider changes in SwiftUI?

4 Answers4