ios – Overlay textual content not centered whereas shifting together with the slider thumb | alignment challenge in SwiftUI

I am utilizing overlayPreferenceValue and anchorPreference to maneuver my TextView together with the slider’s thumb with out affecting the structure. Nevertheless, the overlaid TextView isn’t horizontally centered with the slider thumb because it strikes.

As you’ll be able to see within the video, at first it’s barely to the left of the middle, then it strikes to the middle, and eventually shifts to the proper on the finish.

VideoLink: Hyperlink

Edit: I received the reply, Because of @BenzyNeez. 🎉

Simply substitute .place with the under .offset

.offset(
  x: CGFloat(worth - vary.lowerBound) * (proxy[anchor].measurement.width - proxy[anchor].measurement.peak) / CGFloat(vary.upperBound - vary.lowerBound),
  y: proxy[anchor].minY - measurement.peak - 10
)

struct ContentView: View {
    
    @State non-public var worth: Float = .zero
    
    @State non-public var isEditing = false
    
    @State non-public var measurement: CGSize = .zero
    
    non-public let vary: ClosedRange = 0...10
    
    var physique: some View {
        Slider(worth: $worth, in: vary) { worth in
            isEditing = worth
        }
        .anchorPreference(key: OverlayPreferenceKey.self, worth: .bounds) { $0 }
        .padding(.horizontal)
        .tint(.pink)
        .body(maxWidth: .infinity, maxHeight: .infinity, alignment: .heart)
        .overlayPreferenceValue(OverlayPreferenceKey.self) { anchor in
            if isEditing, let anchor {
                GeometryReader { proxy in
                    Textual content(worth, format: .quantity.precision(.fractionLength(1)))
                        .foregroundStyle(.black)
                        .font(.physique.monospacedDigit())
                        .padding(.vertical, 12)
                        .padding(.horizontal, 20)
                        .background(.white)
                        .clipShape(.capsule)
                        .overlay {
                            Capsule()
                                .stroke(.black.opacity(0.5), lineWidth: 0.5)
                        }
                        .background {
                            GeometryReader { proxy in
                                Shade.clear
                                    .onChange(of: proxy.measurement, preliminary: true) { previous, new in
                                        measurement = new
                                    }
                            }
                        }
                        .place(
                            x: proxy[anchor].minX + (CGFloat((worth - vary.lowerBound) / (vary.upperBound - vary.lowerBound))) * proxy[anchor].width,
                            y: proxy[anchor].minY - measurement.peak / 2 - 10
                        )
                }
            }
        }
    }
}