通过 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(){&nbsp; sliderChange(this.value)});function sliderChange(val) {&nbsp; &nbsp; range.style.background = 'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)';}.slider{&nbsp; &nbsp; -webkit-appearance: none;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 20px;&nbsp; &nbsp; background: linear-gradient(90deg, red 60%, blue);&nbsp; &nbsp; outline: none;&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; -webkit-transition: 0.2s;&nbsp; &nbsp; transition: opacity 0.2s;&nbsp; &nbsp; border-radius: 12px;&nbsp; &nbsp; 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" />此外，顺便说一下，使用两个百分比值并没有任何作用。