通过 Javascript 更改范围滑块背景

Question

我正在尝试通过 Javascript 更改范围滑块的背景颜色。我没有收到任何错误，但是背景颜色根本没有改变。所有其他改变的值都有效，只是不是背景样式。<input type="range" min="1000" max="6000" value="2000" step="100" class="slider" id="myRange" name="myRange"/>.slider{    -webkit-appearance: none;    width: 100%;    height: 20px;    background: linear-gradient(90deg, rgb(244, 237, 144) 60%, rgb(244, 237, 144) 60%);    outline: none;    opacity: 1;    -webkit-transition: 0.2s;    transition: opacity 0.2s;    border-radius: 12px;    box-shadow: 0px 0.1px 10px -2px #000000;}document.getElementById('myRange').addEventListener('input', function(){sliderChange(this.value)});function sliderChange(val) {    document.getElementById('myRange').style.background = 'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%);';    if (val == 6000) {        var value = '6,000+';    } else {        var value = val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");    }    document.getElementById('sqftValue').innerHTML = value;    var base = val * 0.12;    var discount = base * 0.2;    var cost = base - discount;    document.getElementById('cost').innerHTML = cost.toFixed(0);}我在这里错过了什么？

Answer 1

尝试从您设置的值的末尾删除分号。

range.style.background =

'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)';

上面的值应该是这样的。

range.style.background =

'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)'

const range = document.getElementById('myRange')

range.addEventListener('input', function(){

  sliderChange(this.value)

});

function sliderChange(val) {

    range.style.background = 'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)';

}

.slider{

    -webkit-appearance: none;

    width: 100%;

    height: 20px;

    background: linear-gradient(90deg, red 60%, blue);

    outline: none;

    opacity: 1;

    -webkit-transition: 0.2s;

    transition: opacity 0.2s;

    border-radius: 12px;

    box-shadow: 0px 0.1px 10px -2px #000000;

}

<input type="range" min="1000" max="6000" value="2000" step="100" class="slider" id="myRange" name="myRange" />

此外，顺便说一下，使用两个百分比值并没有任何作用。