How do I create a slider in SwiftUI for an Int-type property?

Question

I have a view with with an Int property named "score" that I want to adjust with a slider.

struct IntSlider: View {
    @State var score:Int = 0

    var body: some View {
        VStack{
            Text(score.description)
            Slider(value: $score, in: 0.0...10.0, step: 1.0)
        }
    }
}

But SwiftUI's Slider only works with doubles/floats.

How can I make it work with my integer?

Answer 1

struct IntSlider: View {
    @State var score: Int = 0
    var intProxy: Binding<Double>{
        Binding<Double>(get: {
            //returns the score as a Double
            return Double(score)
        }, set: {
            //rounds the double to an Int
            print($0.description)
            score = Int($0)
        })
    }
    var body: some View {
        VStack{
            Text(score.description)
            Slider(value: intProxy , in: 0.0...10.0, step: 1.0, onEditingChanged: {_ in
                print(score.description)
            })
        }
    }
}

Answer 2

TL;DR

As an alternative to the other answers on this page, I propose a solution which leverages type-constrained, generic extension methods to simplify the call site. Here's an example of all you have to do:

Slider(value: .convert(from: $count), in: 1...8, step: 1)

Benefits of this approach:

1. It automatically converts any Int type (e.g. Int, Int8, Int64) to any Float type (e.g. Float, Float16, CGFloat, Double), and vice versa thanks to generics/overloads.

2. Once you have added the extension to your project (or in a package referenced by your project), you simply call .convert at any binding site and it 'just works.'

3. There is nothing else needed to use it (i.e. no 'proxy' structs, vars or other local items to clutter your view.) You simply use it directly inline (see above.)

4. When in any place that takes a Binding, simply type . and code-completion will automatically suggest convert as an option (this works because these are static extensions defined on Binding itself.)

Here are the aforementioned extension methods...

public extension Binding {

    static func convert<TInt, TFloat>(from intBinding: Binding<TInt>) -> Binding<TFloat>
    where TInt:   BinaryInteger,
          TFloat: BinaryFloatingPoint{

        Binding<TFloat> (
            get: { TFloat(intBinding.wrappedValue) },
            set: { intBinding.wrappedValue = TInt($0) }
        )
    }

    static func convert<TFloat, TInt>(from floatBinding: Binding<TFloat>) -> Binding<TInt>
    where TFloat: BinaryFloatingPoint,
          TInt:   BinaryInteger {

        Binding<TInt> (
            get: { TInt(floatBinding.wrappedValue) },
            set: { floatBinding.wrappedValue = TFloat($0) }
        )
    }
}

...and here's a playground-ready demonstration showing them in use.
(Note: Don't forget to also copy over the extension methods above!)

struct ConvertTestView: View {

    @State private var count: Int = 1

    var body: some View {

        VStack{
            HStack {
                ForEach(1...count, id: \.self) { n in
                    Text("\(n)")
                        .font(.title).bold().foregroundColor(.white)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(.blue)
                }
            }
            .frame(maxHeight: 64)
            HStack {
                Text("Count: \(count)")
                Slider(value: .convert(from: $count), in: 1...8, step: 1)
            }
        }
        .padding()
    }
}

And finally, here are the results...

Answer 3

There is also a way by using the double value with casting it to an int before.. NOTICE: You have to be careful with this way - you need to remember that it is a double value and no int.

struct IntSlider: View {
    @State var score: Double = 0

    var body: some View {
        VStack{
            Text("\(Int(score))")
            Slider(value: $score, in: 0...10, step: 1)
        }
    }
}

Answer 4

To elaborate on lorem ipsum's answer before, you can use this handy struct:

struct IntDoubleBinding {
    let intValue : Binding<Int>
    
    let doubleValue : Binding<Double>
    
    init(_ intValue : Binding<Int>) {
        self.intValue = intValue
        
        self.doubleValue = Binding<Double>(get: {
            return Double(intValue.wrappedValue)
        }, set: {
            intValue.wrappedValue = Int($0)
        })
    }
}

and then in your code, just use it like this:

struct IntSlider: View {
    @State var score:Int = 0

    var body: some View {
        VStack{
            Text(score.description)
            Slider(value: IntDoubleBinding($score).doubleValue, in: 0.0...10.0, step: 1.0)
        }
    }
}