How to give differnet background color for slider?

Question

I want to give a color for a slider with two different colors based on the position of the slider. one color should be in front of the slider, and another color should be after the slider. I used other projects using css. Here is the code that hides the input of [type = range].

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;
}

And html:

<input type="range"  name="rangeEl" value="120" min="0" max="150"  />

It displays output well with a single background color. Now I need to give the color for the slider, which is in front of the thumb, and another color, which is after the thumb. Help me!

Answer 1

, , , , . , .

css3wizardry , <div> prototype. HTML5 <input>, .

, . , jQuery, background-color mousedown. mousemove, , :) Chrome 11 Safari 5.

, .