title: Have two different background colors on input range
body: <p>I'd like to have the left part of my input type:range to be #555555 and past the slider to the right to be #FFFFFF.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#seekslider {
      position: fixed;
      bottom: 30px;
      left: 0px;
      right: 0px;
      height: 5px;
      -webkit-appearance: none !important;
      background-color: #FFFFFF;
  }
  #seekslider::-webkit-slider-thumb {
      -webkit-appearance: none !important;
      background-color: #006CD0;
      height: 13px;
      width: 13px;
      border-radius: 100%;
      cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="seekslider" type="range" min="0.0" max="100.0" value="0" step="0.1"&gt;</code></pre>
  </div>
  </div>
  </p>