Youtubeみたいなシークバー

<INPUT TYPE="RANGE" CLASS="SEEK_BAR" ID="SEEK_BAR" MIN="0" MAX="100" VALUE="0"> <DIV CLASS="VALUE_DISPLAY" ID="VALUE_DISPLAY"></DIV> <STYLE> body{ background-color: aquamarine; } .SEEK_BAR { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 0px; background-color: rgb(222, 222, 222); outline: none; } .SEEK_BAR::-webkit-slider-thumb,.SEEK_BAR::-moz-range-thumb{ -webkit-appearance: none; appearance: none; width: 10px; height: 20px; border-radius: 0; border-width: 0px; background-color: #ff0000; cursor: pointer; transform: rotate(0deg); } </STYLE> <SCRIPT> let SEEK_BAR = document.getElementById("SEEK_BAR");//RANGEをここに let VALUE_DISPLAY = document.getElementById("VALUE_DISPLAY"); //シークバーの値が変わった時にここが実行される(らしい) SEEK_BAR.addEventListener("input", function() { SEEK_BAR_UPDATE(); }); //ページ読み込み完了時にここが実行される window.addEventListener("load", (e)=>{ SEEK_BAR_UPDATE(); }); //シークバーをアップデートする関数 function SEEK_BAR_UPDATE(){ const VALUE = (SEEK_BAR.value - SEEK_BAR.min) / (SEEK_BAR.max - SEEK_BAR.min) * 100;//シークバーの値(0～100) SEEK_BAR.style.background = `linear-gradient(to right, #ff0000 0%, #ff0000 ${VALUE}%, #ddd ${VALUE}%, #ddd 100%)`;//シークバーの背景色(ここでYoutubeとかでよくあるあれをしている) VALUE_DISPLAY.innerHTML = Math.floor(VALUE);//値を表示する(小数点を切り捨てて) } </SCRIPT>