通过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" />

此外，使用两个百分比值也无济于事。