HTML видео не корректируется достаточно быстро при смене слайдера

Question

Я хочу сделать видеослайдер, чтобы пользователь мог активно просматривать видео. Как только значение слайдера изменится, видеокадр тоже должен. Но сейчас это очень поразительно. Только при медленном перемещении ползунка изменение значения немедленно влияет на видеокадр.

Я думал об использовании requestAnimationFrame, но, похоже, у меня это не сработало.

Это то, что ядо сих пор. Я ценю любую помощь:

<style>
 
#sliderClouds{
  width: 100%;
}

  </style>
<div class="vidWrapper">
    <!-- ###########################SLIDER Video HTML STart #################################### -->
    <!-- Video -->
    <video id="videoClouds" preload="auto">
      <source src="https://upload.wikimedia.org/wikipedia/commons/4/45/Test_movie.webm" type="video/webm">
      <p>
        Your browser doesn't support HTML5 video.
      </p>
    </video>
    <!-- Video Controls -->
    <div id="video-controlsClouds">
      <input type="range" id="sliderClouds" step="1" value="50">
    </div>
</div> 

<script>

/*##############SLIDER VIDEO JS Start####################*/
const videoClouds = document.querySelector("#videoClouds");
const seekBarClouds = document.querySelector("#sliderClouds");
let timeClouds;

videoClouds.onloadedmetadata = () => {
  timeClouds = videoClouds.duration * (seekBarClouds.value / 100);
  videoClouds.currentTime =  timeClouds;
};


// Event listener for the seek bar
seekBarClouds.addEventListener("input", () => {
  // Calculate the new time 
    timeClouds = videoClouds.duration * (seekBarClouds.value / 100);

    // Update the video time
    videoClouds.currentTime = timeClouds;

});

/*##############SLIDER VIDEO JS End####################*/


</script>