入力[範囲]進行中のクロムの回避策は、値を選択すると機能しません

Question

ハンドルの前に色を変更する範囲入力を実装しようとしています。ここで私は範囲の値を変更するたびに呼び出される関数です：あなたはちょうどそれが動作例で音楽を聴く場合

updateProgress (val = this.range.value) { 
    const percent = Math.ceil(
     ((val - this.range.min)/
     (this.range.max - this.range.min)) * 100 
    ); 

    this.range.style.background = `linear-gradient(to right, #ffffff 0%,#ffffff ${ 
     percent 
    }%,#363439 ${ 
     percent 
    }%,#363439 100%)`; 

    } 

は、ここでは完全な作業例があっても、今https://jsfiddle.net/a2rLfu6a/

ですグラデーションが常にハンドルに続くわけではないことがわかります - 時には "遅い"こともあります。

特定の時間を探すために範囲のどこかをクリックしようとすると、オーディオの正しい瞬間を探しますが、トラック全体が白くなります。なぜ、どのように私はこれを解決することができますか？

Answer 1

私は、これはあなたが何を意味するかであるかどうかわからないんだけど削除：あなたはそれをクリックしたときに

input[type=range]:focus::-webkit-slider-runnable-track { 
    background: #f0f0f0; 
} 

はトラック白をレンダリングしません。