title: Apply different color on two parts of input range
body: <p>I'm trying to create a seek bar for the video and I want to show black color on the seek bar representing the amount of video which has been downloaded. How can I assign an additional color on the seek bar representing the amount of video downloaded?</p>
  
  <p>I think I didn't explain my question properly. I want a color (e.g. silver) which shows the amount of video which has been downloaded for playing. Silver color on the seek bar can be found in the default <code>html5 video</code> and <code>YouTube video player</code>. (Image provided below)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var player = document.querySelector("video"),
      seek_bar = document.querySelector("input"),
      _console = document.querySelector("div");
  
  player.ontimeupdate = function() {
    seek_bar.value = this.currentTime.toString().split(".")[0];
  }
  player.addEventListener('progress', function() {
    try {
      _console.innerHTML = "Downloaded Upto: " + this.buffered.end(0).toString().split(".")[0];
    } catch(e) {}
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>video {
    width: 90%;
    height: 75%;
  }
  input[type="range"] {
    width: 90%;
    height: 10px;
    background: rgb(110, 170, 250);
    border: 1px solid rgb(15, 15, 15);
    border-radius: 50px;
    -webkit-appearance: none !important;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: rgb(15, 15, 15);
    height: 20px;
    width: 20px;
    cursor: pointer;
    border-radius: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;video src="https://dash.akamaized.net/akamai/bbb/bbb_1920x1080_60fps_12000k.mp4" controls&gt;&lt;/video&gt;
    &lt;input type="range" min="0" value="0" max="634"/&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><code>SILVER (THE OTHER COLOR) ON THE SEEK_BAR:</code></p>
  
  <p><img src="https://i.stack.imgur.com/K401f.png" width="200" height="50"></p>
  
  <p><img src="https://i.stack.imgur.com/sILRw.jpg" width="400" height="250"></p>