Custom range slider in SwiftUI

Question

Trying to add slider minimum & maximum range selection with value in SwiftUI.

Add min & max value like above image.

// define min & max value
@State var minValue: Float = 0.0
@State var maxValue: Float = Float(UIScreen.main.bounds.width - 50.0)


// setup slider view
ZStack (alignment: Alignment(horizontal: .leading, vertical: .center), content: {
       Rectangle()
             .fill(Color(UIColor.systemTeal).opacity(0.3))
             .cornerRadius(30)
             .frame(width: CGFloat(self.max), height: 30)
                
       Rectangle()
             .fill(Color.blue.opacity(25))
             .cornerRadius(30)
             .offset(x: CGFloat(self.min))
             .frame(width: CGFloat((self.max + 20) - self.min), height: 30)
                
       Circle()
          .fill(Color.orange)
          .frame(width: 30, height: 30)
          .offset(x: CGFloat(self.min))
          .gesture(DragGesture().onChanged({ (value) in
                if value.location.x > 8 && value.location.x <= self.sliderWidth &&
                       value.location.x < CGFloat(self.max) {
                       self.min = Double(value.location.x)
                 }
           }))
                
        Circle()
           .fill(Color.orange)
           .frame(width: 30, height: 30)
           .offset(x: CGFloat(self.max))
           .gesture(DragGesture().onChanged({ (value) in
                if value.location.x <= self.sliderWidth && value.location.x > CGFloat(self.min) {
                   self.max = Double(value.location.x)
                }
           }))
})
.padding()

In this code, I'm facing issue with max value, while drag the max value and then changed the slider track width, so it's not moving perfectly. I tried with different different frame, but it doesn't work.

Answer 1

Finally, I got the solution.

// define min & max value
@State var minValue: Float = 0.0
@State var maxValue: Float = Float(UIScreen.main.bounds.width - 50.0)
        
// setup slider view
VStack {
    HStack {
        Text("0")
            .offset(x: 28, y: 20)
            .frame(width: 30, height: 30, alignment: .leading)
            .foregroundColor(Color.black)
        
        Spacer()
        
        Text("100")
            .offset(x: -18, y: 20)
            .frame(width: 30, height: 30, alignment: .trailing)
            .foregroundColor(Color.black)
    }
    
    ZStack(alignment: Alignment(horizontal: .leading, vertical: .center), content: {
        Capsule()
            .fill(Color.black.opacity(25))
            .frame(width: CGFloat((UIScreen.main.bounds.width - 50) + 10), height: 30)
        
        Capsule()
            .fill(Color.black.opacity(25))
            .offset(x: CGFloat(self.minValue))
            .frame(width: CGFloat((self.maxValue) - self.minValue), height: 30)
        
        Circle()
            .fill(Color.orange)
            .frame(width: 30, height: 30)
            .background(Circle().stroke(Color.white, lineWidth: 5))
            .offset(x: CGFloat(self.minValue))
            .gesture(DragGesture().onChanged({ (value) in
                if value.location.x > 8 && value.location.x <= (UIScreen.main.bounds.width - 50) &&
                    value.location.x < CGFloat(self.maxValue - 30) {
                    self.minValue = Float(value.location.x - 8)
                }
            }))
        
        Text(String(format: "%.0f", (CGFloat(self.minValue) / (UIScreen.main.bounds.width - 50)) * 100))
            .offset(x: CGFloat(self.minValue))
            .frame(width: 30, height: 30, alignment: .center)
            .foregroundColor(Color.black)
                
        Circle()
            .fill(Color.orange)
            .frame(width: 30, height: 30)
            .background(Circle().stroke(Color.white, lineWidth: 5))
            .offset(x: CGFloat(self.maxValue - 18))
            .gesture(DragGesture().onChanged({ (value) in
                if value.location.x - 8 <= (UIScreen.main.bounds.width - 50) &&           value.location.x > CGFloat(self.minValue + 50) {
                    self.maxValue = Float(value.location.x - 8)
                }
            }))
        
        Text(String(format: "%.0f", (CGFloat(self.maxValue) / (UIScreen.main.bounds.width - 50)) * 100))
            .offset(x: CGFloat(self.maxValue - 18))
            .frame(width: 30, height: 30, alignment: .center)
            .foregroundColor(Color.black)
    })
    .padding()
}