如何在洗涤器栏中制作可拖动手柄（div）

Question

我正在尝试使用手柄来创建和创建音频洗涤器栏，我可以将其来回拖动到音乐的不同部分。

必须拖动的项目是.handle，.played将紧随其后。

我做了如下结构：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

您需要使用

O(p)

并根据需要对其进行样式化

codepen链接：https://codepen.io/anon/pen/MLZpzg