title: style input range to look like a progress bar
body: <p>i have a video element and i want to create my own controls player.</p>
  
  <p>i'm using range input for the seek bar. i want to style it like this:</p>
  
  <p><a href="https://i.stack.imgur.com/ceIk1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ceIk1.png" alt="enter image description here"></a></p>
  
  <p>so the orange is what you have seen and the teal is the time left.</p>
  
  <p>i managed to style the input like this: <a href="https://jsfiddle.net/d3oeztwt/" rel="noreferrer">https://jsfiddle.net/d3oeztwt/</a> but i don't know about the orange.</p>
  
  <p>i know i can use progress bar but i can't find a way to trigger the slider with progress bar.</p>
  
  <pre><code>&lt;input type="range"&gt;
  
  
  input[type=range] {
      /*removes default webkit styles*/
      -webkit-appearance: none;
      /*required for proper track sizing in FF*/
      width: 300px;
  }
  input[type=range]::-webkit-slider-runnable-track {
      width: 300px;
      height: 10px;
      background: #009999;
      border: none;
      border-radius: 3px;
  }
  input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background: #99FFFF;
      margin-top: -4px;
  }
  input[type=range]:focus {
      outline: none;
  }
  </code></pre>