Custom Slider Taking Too Much Space - swift

Question

I used a code from here to create my own variation of a custom slider. However, the slider has too much extra space at the bottom, and I would like to remove that. Is there any way to do so?
Here is the code of the slider:
struct CustomSlider: View {
#Binding var value: CGFloat
#State var lastOffset: CGFloat = 0
var range: ClosedRange<CGFloat>
var leadingOffset: CGFloat = 5
var trailingOffset: CGFloat = 5
var knobSize: CGSize = CGSize(width: 25, height: 25)
let trackGradient = LinearGradient(gradient: Gradient(colors: [.pink, .yellow]), startPoint: .leading, endPoint: .trailing)
var body: some View {
GeometryReader { geometry in
ZStack(alignment: .leading) {
ZStack(alignment: .leading) {
Capsule()
.fill(Color(hue: 0.172, saturation: 0.275, brightness: 1.0))
.frame(height: 30)
Capsule()
.fill(Color(hue: 0.55, saturation: 0.326, brightness: 1.0))
.frame(width: self.$value.wrappedValue.map(from: self.range, to: self.leadingOffset...(geometry.size.width - self.knobSize.width - self.trailingOffset))+30, height: 30)
}
HStack {
RoundedRectangle(cornerRadius: 50)
.frame(width: self.knobSize.width, height: self.knobSize.height)
.foregroundColor(.white)
.offset(x: self.$value.wrappedValue.map(from: self.range, to: self.leadingOffset...(geometry.size.width - self.knobSize.width - self.trailingOffset)))
.gesture(
DragGesture(minimumDistance: 0)
.onChanged { value in
if abs(value.translation.width) < 0.1 {
self.lastOffset = self.$value.wrappedValue.map(from: self.range, to: self.leadingOffset...(geometry.size.width - self.knobSize.width - self.trailingOffset))
}
let sliderPos = max(0 + self.leadingOffset, min(self.lastOffset + value.translation.width, geometry.size.width - self.knobSize.width - self.trailingOffset))
let sliderVal = sliderPos.map(from: self.leadingOffset...(geometry.size.width - self.knobSize.width - self.trailingOffset), to: self.range)
self.value = sliderVal
}
)
}
}
}
}
}
I have noticed that when I select the empty space, the code cased in geometry reader is automatically selected. (I couldn't embed the image in this post, so here's the link)

Answer 1

When you use GeometryReader, it automatically takes up all available space. If you'd like to constrain it, use a frame(height: ) modifier to give it a certain height.
struct CustomSlider: View {
//all of the properties
var body: some View {
GeometryReader { geometry in
// slider code
}.frame(height: 60) //<-- Here
}
}