trying to figure out how to write the JS part to let the slider move with the time passed! help me figure out how to go about this code below.
i have canceled the controls attribute from the video tag so make a custom controls for the video. made a custom controls using fontawesome icons and wibkit slider thumb and track. i cant figure out how to manipulate the custom controls for the slider dynamically with JS.
const VisVideo = document.querySelector("video");
const range = document.querySelector("input");
const play = document.querySelector(".play");
const pause = document.querySelector(".pause");
const stoper = document.querySelector(".stop");input[type="range"]{
-webkit-appearance: none;
width: 100%;
background:transparent;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
height: 18px;
width: 8px;
border-radius: 2px;
border: none;
background-color: lightgrey;
cursor: pointer;
padding-left: 1px;
margin-top: -6px;
box-shadow: 1px 1px 1px #111;
}
input[type="range"]::-webkit-slider-runnable-track{
width: 100%;
height: 5px;
margin: 0 0.2rem;
cursor: pointer;
background: rgb(63, 93, 228);
box-shadow: 1px 1px 1px #111;<body>
<div class="screen">
<img src="poster.png"/>
<video class="video">
<source src="gone.mp4" />
</video>
</div>
<div class="play ">
<i class="fa-solid fa-play"></i>
</div>
<div class="pause ">
<i class="fa-solid fa-pause"></i>
</div>
<div class="stop ">
<i class="fa-solid fa-stop"></i>
</div>
<input type="range" step="1" min="0" max="100" value="0" />
</body>