title: how to give differnet background color to slider?
body: <p>I want to give the color for slider with two different colors based upon the slider position. one color should be before the slider and another color should be after the slider. I achived other designs using css. Here is the code that skins the input[type=range].</p>
  
  <pre><code>input[type=range]{
     border: 1px solid #4ba8b1;
  margin: 0px 0px 5px 5px;
  background:-webkit-gradient(linear,center top, center bottom, from(#CFDCDD),to(#DFE9EA),color-stop(50%,#DFE9EA));
  float:left;
  pointer:cursor;
  -webkit-appearance:none;
  width:300px;
  height:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  }
  input[type=range]::-webkit-slider-thumb
  {
    -webkit-appearance:none;
     border:1px solid #4ba8b1;
     background:-webkit-gradient(linear,center top, center bottom,from(#CAE8E9),to(#E4ECEC),color-stop(50%,#9ED2D1));
     background:-moz-linear-gradient(top,#CAE8E9,#9ED2D1,#E4ECEC);
     width:7px;
     height:15px;
     opacity:.7;
  }
  </code></pre>
  
  <p>And the html is :</p>
  
  <pre><code>&lt;input type="range"  name="rangeEl" value="120" min="0" max="150"  /&gt;
  </code></pre>
  
  <p>It renders the output well with single background color. Now I need to give color for slider which is before the thumb and another color which is after the thumb. help me! </p>