Retro Slider Example - SwiftUI

gistfile1.txt

import SwiftUI

struct RetroSlider: View {
    @Binding var value: Double
    
    let range: ClosedRange<Double>
    let step: Double
    
    var body: some View {
        GeometryReader { geo in
            let width = geo.size.width
            let percent = (value - range.lowerBound) / (range.upperBound - range.lowerBound)
            let xPos = width * CGFloat(percent)
            
            ZStack(alignment: .leading) {
                
                // Track (background)
                Rectangle()
                    .frame(height: 8)
                    .foregroundColor(.gray.opacity(0.3))
                
                // Filled track
                Rectangle()
                    .frame(width: xPos, height: 8)
                    .foregroundColor(.green)
                
                // Pixel-style thumb
                Rectangle()
                    .frame(width: 24, height: 24)
                    .foregroundColor(.green)
                    .position(x: xPos, y: 4)
            }
            .gesture(
                DragGesture()
                    .onChanged { gesture in
                        let location = gesture.location.x
                        var newValue = Double(location / width) * (range.upperBound - range.lowerBound) + range.lowerBound
                        
                        // Snap to step
                        if step > 0 {
                            newValue = (newValue / step).rounded() * step
                        }
                        
                        value = min(max(newValue, range.lowerBound), range.upperBound)
                    }
            )
        }
        .frame(height: 40)
    }
}