I am engaged on a customized slider utilizing a RoundedRectangle
for the monitor with one other Rectangle
for the progress with a masks utilized. This largely works high quality so long as the thumb shouldn’t be near the tip. Because the thumb is dragged near the fitting aspect edge, the RoundedRectangle
seems to be rounded at each ends. How can I repair it such that solely the fitting finish of the rounded rectangle reveals as rounded ?
struct Slider: View {
@Binding var progress: CGFloat
non-public let stroke: CGFloat = 5.0
non-public var thumbWidth: CGFloat { stroke * 2 }
non-public var thumbHeight: CGFloat { thumbWidth * 3.5 }
var physique: some View {
GeometryReader { geometry in
ZStack {
Shade.black.ignoresSafeArea()
VStack {
let progressWidth = geometry.measurement.width * progress
let sliderWidth = geometry.measurement.width - thumbWidth
ZStack(alignment: .main) {
RoundedRectangle(cornerRadius: stroke)
.body(peak: stroke)
.foregroundStyle(Shade.white.opacity(0.5))
.padding(.main, progressWidth)
Rectangle()
.fill(Shade.white.opacity(0.5))
.masks(alignment: .main) {
Rectangle()
.body(width: progressWidth)
}
Capsule()
.fill(.purple)
.body(width: thumbWidth, peak: thumbHeight)
.offset(x: progress * (geometry.measurement.width - thumbWidth))
.gesture(
DragGesture()
.onChanged { gesture in
let newProgress = min(max(gesture.location.x / sliderWidth, 0), 1)
progress = newProgress
}
)
}
.body(peak: thumbHeight)
}
}
}
}
}
struct SliderView: View {
@State non-public var progress: CGFloat = 0.0
var physique: some View {
ZStack {
Shade.black.ignoresSafeArea()
Slider(progress: $progress)
}
}
}