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

Question

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

Answer 1

这是一个小更新：

如果使用以下内容，它将动态更新，而不是释放鼠标。

“更改mousemove”功能

<script>

$('input[type="range"]').on("change mousemove", function () {

    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',

                '-webkit-gradient(linear, left top, right top, '

                + 'color-stop(' + val + ', #2f466b), '

                + 'color-stop(' + val + ', #d3d3db)'

                + ')'

                );

});</script>