如何设置HTML5范围输入的样式，使其在滑块前后具有不同的颜色？

Question

我希望左侧为绿色，右侧为灰色。如上图所示将是完美的。最好是一个纯CSS解决方案（只需要担心WebKit）。

这样的事情可能吗？

Answer 1

这是一个小更新：如果使用以下内容，它将动态更新，而不是释放鼠标。“更改mousemove”功能<script>$('input[type="range"]').on("change mousemove", function () {&nbsp; &nbsp; var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));&nbsp; &nbsp; $(this).css('background-image',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '-webkit-gradient(linear, left top, right top, '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + 'color-stop(' + val + ', #2f466b), '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + 'color-stop(' + val + ', #d3d3db)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + ')'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );});</script>