title: HTML5 input range styling before
body: <p>I'm currently styling HTML5 input type range  using below code:</p>
  
  <pre><code>input[type="range"]{
      -webkit-appearance: none;
      -moz-apperance: none;
      width: 100%;
      height: 8px;
      padding: 0 20px;
      background: #024069;
      border-radius: 2px;
      margin-top: 25px;
  }
  
  
  input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance:none; 
      -moz-apperance:none; 
      width:25px; 
      height:25px;
      -webkit-border-radius:20px; 
      -moz-border-radius:20px; 
      -ms-border-radius:20px; 
      -o-border-radius:20px; 
      border-radius:20px;
      background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51, #d1d1d1), color-stop(1, #c8c8c8) );
      border: 1px solid #787878;
  }
  </code></pre>
  
  <p>This is all good. But now I'm trying to have two different colours on the actual slider so left of the thumb is blue and right of the thumb is black.</p>
  
  <p>I tried :before but it didn't work. How can we achieve this?</p>