ios - Overlay Circle Markers on SwiftUI Slider

I’m working on a SwiftUI project where I’m trying to overlay circle markers on a Slider to represent annotations on a video timeline. However, I’m facing an issue where the circle markers are not appearing on the slider as expected.

Here’s a simplified version of my code:

import SwiftUI

struct ContentView: View {
    @State private var currentTime: TimeInterval = 0
    @State private var annotations: [Annotation] = [] // Assume you have a struct named Annotation
    
    // Other properties and functions...

    var body: some View {
        HStack {
            Slider(value: Binding(get: {
                currentTime
            }, set: { newValue in
                // Function to handle slider value change...
            }), in: 0...getTotalDuration(), step: 0.01)
            .accentColor(.blue)
            .frame(width: UIScreen.main.bounds.width)
            
            ForEach(annotations) { annotation in
                Circle()
                    .foregroundColor(.red)
                    .frame(width: 10, height: 10)
                    .position(x: calculateMarkerPosition(annotation.timestamp))
                    .onTapGesture {
                        // Function to handle tap on the circle marker...
                    }
            }
        }
        .padding(.horizontal)
        
        // Other UI components...
    }

    // Other functions...
}

In this code, I’m attempting to overlay red circle markers on a blue-accented slider, but the circles are not showing up as expected.

Could someone help me understand what might be causing this issue? Is there a better approach to overlaying circle markers on a SwiftUI slider?

Thanks in advance!
image from iOS simulator