Anchor Preference & Overlay Preference

SliderOverlay.swift

/*
Displaying a bubble that follows the slider thumb using the `anchorPreference` and
`overlayPreferenceValue` modifiers in SwiftUI.
*/

import SwiftUI

struct OverlayPreferenceKey: PreferenceKey {
    
    typealias Value = Anchor<CGRect>?
    
    static var defaultValue: Self.Value = nil
    
    static func reduce(value: inout Self.Value, nextValue: () -> Self.Value) {
        value = nextValue()
    }
}

struct ContentView: View {
    
    @State private var value: Float = .zero
    
    @State private var isEditing = false
    
    @State private var size: CGSize = .zero
    
    private let range: ClosedRange<Float> = 0...10
    
    var body: some View {
        Slider(value: $value, in: range) { value in
            isEditing = value
        }
        .anchorPreference(key: OverlayPreferenceKey.self, value: .bounds) { $0 }
        .padding(.horizontal)
        .tint(.red)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
        .overlayPreferenceValue(OverlayPreferenceKey.self) { anchor in
            if isEditing, let anchor {
                GeometryReader { proxy in
                    Text(value, format: .number.precision(.fractionLength(1)))
                        .foregroundStyle(.black)
                        .font(.body.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
                                Color.clear
                                    .onChange(of: proxy.size, initial: true) { old, new in
                                        size = new
                                    }
                            }
                        }
                        .offset(
                            x: CGFloat(value - range.lowerBound) * (proxy[anchor].size.width - proxy[anchor].size.height) / CGFloat(range.upperBound - range.lowerBound),
                            y: proxy[anchor].minY - size.height - 10
                        )
                }
            }
        }
    }
}