Как сделать перетаскиваемую ручку (div) в скруббере

Question

Я пытаюсь создать звуковую панель, используя ручку, которую я могу перетаскивать назад и вперед к другой части музыки.

Элемент, который должен быть перетаскиваемым, - это .handle, и *За ним последует 1004 *.

Я сделал структуру, как показано ниже: JSFiddle

.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>

Есть идеи, как заставить это работать?

Answer 1

вам нужно использовать

<input type="range" />

и стилизовать его под нужды

кодовая ссылка: https://codepen.io/anon/pen/MLZpzg