Developing a SwiftUI algorithm based on screen size - swift

Question

so I have a slider and I have a little VStack frame with some text in it that I'd like to move when you touch the slider (I'd like the VStack to stay directly above where the slider is all the time). I wasn't sure if there was a better way to do this so I tried just adjusting the leading padding of the VStack by making it dependent on the value of the slider. Here's my code:
struct ViewName: View {
#State private var sliderValue: Double = 0.0
var body: some View {
VStack {
HStack {
VStack {
Text("t")
}.frame(height: 30).background(Color.white)
.padding(.leading, CGFloat(CGFloat(DayRangeValue) * (UIScreen.main.bounds.width * 0.7)/24) + ((UIScreen.main.bounds.width * 0.15) + 10))
//The above padding is the algorithm: the addition of (UIScreen.main.bounds.width * 0.15 + 10) essentially works; it tells the VStack the starting position, and works on diff device simulators.
Spacer()
}
Slider(value: $sliderValue, in: 0...23).frame(width: UIScreen.main.bounds.width * 0.7)
//Note: the 0...23 cannot be changed, and the width of the slider is a percentage of screen size because I figured it can't be some static value, as that would only work on one device
}
}
}
Long story short, I'd like the "t" to be above the slider the wherever it is; on whatever device. The above algorithm for padding currently works perfectly on one of the iPad simulators, but it doesn't work properly on the iPhone 8 simulator (for example). If someone could help me figure out a padding algorithm based on screen size that works across all devices, that would be amazing.

Answer 1

If I correctly understood your intention, here is possible solution (geometry-independent). Tested with Xcode 11.4 / iOS 13.4
let kKnobWidth = CGFloat(24)
struct DemoLabelAboveSlider: View {
var range: ClosedRange<Double> = 0...23
#State private var sliderValue: Double = 0.0
var body: some View {
VStack(alignment: .leading) {
Slider(value: self.$sliderValue, in: self.range)
.padding(.vertical)
.overlay(GeometryReader { gp in
Text("t")
.position(x: CGFloat(self.sliderValue) * (gp.size.width - kKnobWidth) / CGFloat(self.range.upperBound) + kKnobWidth / 2, y: 0)
})
}
.padding(.horizontal) // << this one is only for better demo
}
}