Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

71
Vistas
how to move the thumb of an input type="range" dynamically (for a custom video player controls) in javascript?

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>

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos