SwiftUI - Slider Example

SwiftUI - Slider Example

ContentView.swift

//
//  ContentView.swift
//  swiftuidev
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    @State var scale: CGFloat = 1.0
    @State private var celsius: Double = 0
    @State var sliderValue: Double = 0
    @State private var value: Float = 0.0
    @State var progress: Float = 0.5
    
    var body: some View {
        VStack {
            HStack {
                VStack {
                    Slider(value: $scale, in: 1.0...10.0, step: 0.1)
                        .padding(.bottom, 100)
                        .frame(width: 200, height: 10, alignment: Alignment.center)

                    Text("Slider Value: \(scale)")
                        .font(.headline)
                        .foregroundColor(Color.red)
                        .multilineTextAlignment(TextAlignment.center)
                        .background(Color.yellow)
                }
            }
            .padding([.leading, .bottom])
            
            //Slide read values from it
            HStack {
                VStack {
                    Slider(value: $celsius, in: -100...100)
                    Text("\(celsius, specifier: "%.1f") Celsius is \(celsius * 9 / 5 + 32, specifier: "%.1f") Fahrenheit")
                }
            }
            .padding([.leading, .bottom])
            
            HStack {
                VStack {
                    HStack {
                        Image(systemName: "minus")
                        //Slider(value: $sliderValue, in: 0...20)
                        Slider(value: $sliderValue, in: 0...20, step: 1) //slider’s step (increment) value
                            .padding()
                            .accentColor(Color.green) //Change color of the slider
                            //.border(Color.green, width: 2) //border around the slider
                            //.overlay(
                            //    RoundedRectangle(cornerRadius: 15.0)
                            //        .stroke(lineWidth: 2.0)
                            //        .foregroundColor(Color.green)
                            //)
                        Image(systemName: "plus")
                    }
                    .foregroundColor(Color.green)
                    Text("Current slider value: \(sliderValue, specifier: "%.2f")")
                }
            }.padding()
            
            //call a function when a slider changes
            HStack {
                VStack {
                    Slider(value: Binding(
                        get: {
                            self.value
                        },
                        set: {(newValue) in
                              self.value = newValue
                              self.doSomething()
                        }
                    ))
                    
                    Slider(value: Binding(get: {
                        self.progress
                    }, set: { (newVal) in
                        self.progress = newVal
                        self.sliderChanged()
                    }))
                    .padding(.all)
                    Text(String(progress))
                }
            }
        }
    }
    
    func doSomething(){
        print("\(value)")
    }
    func sliderChanged() {
        print("Slider value changed to \(progress)")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}