如何在洗涤条中制作可拖动的手柄（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

你需要使用

<input type="range" />

并根据需要设计风格

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