javascript - 更改范围 slider 颜色的最简单方法是什么？

Question

我想使用范围作为输入标记。我还想使用标准 HTML。所以

<input type="range">

在拇指之前和之后设置栏样式的最简单方法是什么？

我想要两种颜色:一种颜色在拇指之前，另一种颜色在拇指之后。

我使用了 JavaScript，但所有的解决方案都很大并且难以处理。

我在我的 WebApp 中使用 AngularJS，所以:

• 有人可以推荐 Angular 插件吗？
• jQuery Range-Slider 比标准的更容易处理吗？
• 有可用的 CSS 选择器吗？

Answer 1

由于您正在使用<input type="range"> ，我认为对旧版浏览器的支持不是问题。该解决方案依赖background-size ，IE < 8 不支持 ( http://caniuse.com/#search=background-size )

这个 fiddle 演示了如何在 jQuery 中完成它；

http://jsfiddle.net/LP5XA/

它只是 slider 中的背景图像，当 slider 移动时会拉伸(stretch)。