<div>
  <svg id="TimelineSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1050 40">
    <title>Timeline</title>
    <g id="Layer_2" data-name="Layer 2">
      <g id="Timeline">
        <line id="Line" class="bmg-timeline-7" x1="26.5" y1="21.5" x2="1026.5" y2="21.5"/>
        <circle id="StartTick" class="bmg-timeline-8" cx="26.5" cy="21.5" r="5"/>
        <circle id="EndTick" class="bmg-timeline-8" cx="26.5" cy="21.5" r="5"/>
      </g>
      <circle id="Handle" class="bmg-timeline-9" cx="26.5" cy="21.5" r="15"/>
    </g>
  </svg>
</div>

.bmg-timeline-1 {
  fill: #5bc1ee;
  stroke-width: 3px;
}

.bmg-timeline-1, .bmg-timeline-6, .bmg-timeline-9 {
  stroke: #002939;
}

.bmg-timeline-1, .bmg-timeline-6, .bmg-timeline-7, .bmg-timeline-8, .bmg-timeline-9 {
  stroke-miterlimit: 10;
}

.bmg-timeline-2 {
  font-size: 12px;
  font-family: Montserrat-Bold, Montserrat;
  font-weight: 700;
}

.bmg-timeline-3 {
  letter-spacing: 0em;
}

.bmg-timeline-4 {
  letter-spacing: 0em;
}

.bmg-timeline-5 {
  letter-spacing: -0.01em;
}

.bmg-timeline-6, .bmg-timeline-7, .bmg-timeline-8 {
  fill: #002939;
}

.bmg-timeline-7, .bmg-timeline-8 {
  stroke: #097aab;
}

.bmg-timeline-7 {
  stroke-width: 10px;
}

.bmg-timeline-8 {
  stroke-width: 2px;
}

.bmg-timeline-9 {
  fill: #eda95a;
  stroke-width: 5px;
}

const handle = document.getElementById("Handle");
const line = document.getElementById("Line");

handle.t1 = gsap.timeline({
  onStart() {
    console.log('start');
  },
  onComplete() {
    console.log('complete');
  }
})
.to("#Handle", {
  duration: 100,
  x: 1000,
  ease: "none"
});

const proxy = document.createElement("div");

Draggable.create(proxy, {
  type: 'x',
  trigger: handle,
  onDragStart: function() {
    handle.t1.pause();
  },
  onDrag: function() {
    handle.t1.progress(this.x/line.getBoundingClientRect().width);
  },
  onDragEnd: function() {
    handle.t1.play();
  },
  onPress: function() {
    gsap.set(this.target, {
      x: handle.t1.progress() * line.getBoundingClientRect().width
    });
    this.update();
  },
  bounds: { minX: 0, maxX: line.getBoundingClientRect().width },
});