ios – Video timeline in SwiftUI

I am making an attempt to make a video timeline with SwiftUI. Specifically, I would like the consumer to have the ability to drag a video horizontally to maneuver in time.

So as to take action, I’ve programmed the next code:

ZStack {

  Rectangle()
    .fill(Coloration.black)
    .body(peak: 350)

  VStack(alignment: .main, spacing: 5) {
     HStack(spacing: 5) {
        Button(motion: {
           print("Undo")
        }) {
           Picture(systemName: "arrow.flip.up.left")
             .foregroundColor(Coloration.grey)
             .font(.system(measurement: 20))
        }
        Button(motion: {
           print("Add media")
        }) {
           Picture(systemName: "plus")
              .foregroundColor(Coloration.grey)
              .font(.system(measurement: 20))
        }
     }
     .offset(x: 110)
     .padding(.horizontal, 10)
     .padding(.high, 10)

     HStack(spacing: 60) {
       Textual content("00:00").foregroundColor(Coloration.white)
       Textual content("00:02").foregroundColor(Coloration.white)
       Textual content("00:04").foregroundColor(Coloration.white)
       Textual content("00:06").foregroundColor(Coloration.white)
      }
     .offset(x: xOffset)

     Rectangle()
        .fill(Coloration.black)
        .body(peak: 85)

     HStack(spacing: 5) {
        Rectangle()
          .fill(Coloration.grey)
          .body(width: UIScreen.foremost.bounds.width, peak: 60)
          .cornerRadius(8)

        Rectangle()
          .fill(Coloration.grey)
          .body(width: UIScreen.foremost.bounds.width / 2, peak: 60)
          .cornerRadius(8)
      }
      .offset(x: xOffset)

      Rectangle()
         .fill(Coloration.black)
         .body(peak: 130)
    }
    .gesture(
       DragGesture()
         .onChanged({ worth in
            xOffset = worth.location.x
         })
         .onEnded({ _ in
            print(xOffset)
         })
     )
   }
}

And it seems like this:

Demo

The issue is that if you click on on the timeline and drag, the grey rectangle strikes to the cursor place. And in actuality, what I would like is that if you click on on the timeline and drag, the displacement that you simply do when dragging ought to transfer the grey rectangle. For instance, if I click on at x = 100 and drag to x = 90, the grey rectangle ought to transfer x = -10. One thing like this:

Demo 2