如何为滑块赋予不同的背景颜色？

我想根据滑块位置为滑块提供两种不同颜色的颜色。一种颜色应位于滑块之前，另一种颜色应位于滑块之后。我使用 CSS 实现了其他设计。这是对输入[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;
}

html 是：

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

它使用单一背景颜色很好地渲染输出。现在我需要为拇指之前的滑块提供颜色，并为拇指之后的另一种颜色提供颜色。帮我！

我注意到你问了一个类似的问题昨天我看了它，但无法真正弄清楚你想要实现什么。我有更多时间思考并做了一些研究并找到了解决方案。

归功于罗伯特·比格斯his post在 css3wizardry 上获取构建滑块和拇指的解决方案<div>标签和原型。但既然你想要一个 HTML5<input>解决方案 我尝试对该元素执行相同的操作。

请看一下demo。请注意，它使用jQuery 事件，但目前只更新background-color on the mousedown。它没有正确初始化，也没有更新颜色mousemove但我认为自己实现这一点是一个很好的练习:) 该演示适用于 Chrome 11 和 Safari 5。

另请阅读这条评论以及对您之前关于样式表单元素的缺点的问题的评论。