title: how to use input[type=range] CSS Pseudo-elements with firefox and IE
body: <p>I have an input with a <code>type="range"</code> attribute that needs to act as a 'seekbar' for a custom html 5 video player.
  i've got all the <code>-webkit...</code> things working (except for buffering...) and i'm trying to recreate them for FF and IE (10 and 11), what would be the best way?</p>
  
  <p>here is the css i've got:</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>input[type=range] {
   -webkit-appearance: none;
   border-radius: 0px;
   vertical-align: middle;
   margin: -8px 0 0 0;
   padding: 3px 0 3px 0;
   position: relative;
   vertical-align: middle;
   overflow-x: hidden;
   overflow-y: visible;
   width: 100%;
   background: transparent;
  }
  input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none !important;
   position: relative;
   pointer-events:none;
   width: 4px;
   height: 100%;
      box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1), 0px 0px 1.8px rgba(13, 13, 13, 0.1);
      border: 0.4px solid rgba(30, 170, 241, 0.57);
      background: #1eaaf1;
      cursor: pointer;
  }
  input[type=range]::-webkit-slider-runnable-track {
   background: #757575; 
   height: 4px;
   margin:5px 0;
  
  }
  input[type=range]::-webkit-slider-thumb:before {
   content:"-";
   font-style: 0;
   line-height:0;
   position: absolute;
   left:-3000px;
   right:0;
   top:0;
   bottom:0;
   background: red;
  }
  input[type=range]::-webkit-slider-thumb:after {
   content: "";
   position: absolute;
   left:-8px;
   right:-8px;
   top:-8px;
   bottom:-8px;
   background: red;
   border-radius: 50%;
   z-index: 10;
  }
  input[type=range]:focus {
   outline:none;
  }
  input[type=range]:hover::-webkit-slider-thumb:after,
  input[type=range]:focus::-webkit-slider-thumb:after {
   background: red;
  }
  input[type=range]:disabled::-webkit-slider-thumb:before {
   background-color: #a1151a;
  }
  input[type=range]:disabled::-webkit-slider-thumb:after {
   background: #adadad !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="range" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>here is a jsFiddle for that as well: <a href="http://jsfiddle.net/goldzimer/yttap7qj/" rel="nofollow">http://jsfiddle.net/goldzimer/yttap7qj/</a></p>
  
  <p>thanks in advance!</p>
  
  <p><strong>Update:</strong> after adding some css for Firefox and IE i am now at a point where only on Firefox i can't get the effect of having the left side with one color and the right side with another.</p>
  
  <p>Here is the updated jsfiddle: <a href="http://jsfiddle.net/goldzimer/yttap7qj/5/" rel="nofollow">http://jsfiddle.net/goldzimer/yttap7qj/5/</a></p>