How to achieve background color in html5 [type = range] input?

Question

Ineed for color input controls [type = range] htmnl5. Since it only works in webkit, I developed it as my wish from many web sources. Here is what I developed for my slider (input [type = range]).

<input type="range"  name="rangeEl" value="20" min="0" max="150" step="1" />

css:

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;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
input[type=range]::-webkit-slider-thumb
{
   -webkit-appearance:none;
   border:1px solid #4ba8b1;
   background-color:#000;
   width:5px;
   height:5px;
}

Now the problem is that the slider should contain two colors that are in front of the thumb, and one that is after the thumb. I also want to get the original image of this thumb in the slider. Is it possible?

Answer 1

, , , , . .

input[type='range'] Webkit :

input[type='range'] {}

:

input[type='range']::-webkit-slider-thumb

, AFAIK, , HTML5. javascript, JQuery.