Как сделать перетаскиваемый дескриптор (div) в полосе прокрутки

.scrubber {
  width: 300px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.scrubber>.bar {
  background: transparent;
  height: 10px;
}

.scrubber>.buffer {
  position: absolute;
  height: 10px;
  background: rgba(255, 0, 0, 0.2);
  top: 0;
}

.scrubber>.played {
  position: absolute;
  width:100px;
  height: 10px;
  background: red;
  top: 0;
  
}

.scrubber>.played>.handle {
  float: right;
  width: 10px;
  height: 10px;
  margin-top: 0px;
  margin-right: -5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
}

<div class = "scrubber">
  <div class = "bar"></div>

  <div class = "buffer"></div>
  <div class = "played">
    <div class = "handle"></div>
  </div>
</div>