What would an event like in the input range look like?

Question

I am creating a custom progress bar for videos, but I have a certain difficulty in detecting when the user tries to drag the reed through the video bar, I want to simulate something similar to what happens in a input type rage

<input type="range" value="50" max="100" min="0" />

In the same, when the user clicks the input and drags the cursor over it the palette follows the position of the cursor in the bar, as it would simulate this with a normal element?

Here’s the basic structure of my bar:

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