I'm creating a custom progress bar for videos, however I'm having a hard time detecting when the user tries to drag the pick across the video bar, I want to simulate something like what happens in a input type rage
<input type="range" value="50" max="100" min="0" />In the same way, when the user clicks on the input and drags the cursor on it the palette follows the position of the cursor in the bar, how would you simulate this with a normal element?
Here is the basic structure of my toolbar:
.progress_input{
width:100%;
height:5px;
display:block;
position:relative;
transition: 0.3s ease-in;
cursor:pointer;
background:#000;
}
.progress-thumb{
z-index:5;
background: #41b8c6;
border-radius: 50%;
width:12px;
height:12px;
transition: 0.1s ease-in;
position:absolute;
left:0%;
top:-3.50px;
}<div class="progress_input">
<div class="progress-thumb"></div>
</div>