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

Question

I am trying to create and audio scrubber bar using a handle I can drag back and forth to a different part of the music.

The item that has to be draggable is the .handle , and .played will follow it.

I made the structure as below: 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> 

Any idea how to make it work?

Answer 1

you need to use

<input type="range" />

and stylize it as you need

codepen link: https://codepen.io/anon/pen/MLZpzg