输入类型范围css - 背景颜色

Question

我想使用css自定义<input type="range">。我想要实现的结果是：

但我的以下代码给了我这个

这是我的代码：

input[type='range'] {
    border-radius: 5px;
    height: 6px;
    vertical-align: middle;
    -webkit-appearance: none;
}
input[type="range"]::-moz-focus-inner:focus{   
    border : 0px;
    outline: 0;
} 
input[type='range']::-moz-range-track {
    border-radius: 5px;
    background-color: #E71D49;
    height: 6px;
    border: 1px dotted transparent !important;
}
input[type='range']::-webkit-slider-thumb {
    border-radius: 20px;
    background-color: #FFF;
    border:none;
    box-shadow: 0 5px #000;
    height: 5px;
    width: 5px;
}
input[type='range']::-moz-range-thumb {
    border-radius: 20px;
    background-color: #fff;
    border:none;
    height: 20px;
    box-shadow: 3px 2px 3px #000;
    width: 20px;
}

是否可以将滑块分为“活动”和“非活动”？

提前致谢 达里奥

Answer 1

希望这个例子可以帮到你

代码：example

var inputs = document.getElementsByTagName('input');
inputs = Array.splice(inputs, 0);
inputs.forEach(function (item) {
if (item.type === 'range') {
    item.onchange = function () {
        value = (item.value - item.min)/(item.max - item.min)
        item.style.backgroundImage = [
            '-webkit-gradient(',
              'linear, ',
              'left top, ',
              'right top, ',
              'color-stop(' + value + ', blue), ',
              'color-stop(' + value + ', red)',
            ')'
        ].join('');
    };
}
});

Answer 2

我认为默认的HTML范围不可能实现这一点。 如果可能的话，你应该研究可定制的插件，我相信有些选项可以完全满足你的要求。