javascript - 如何使范围 slider 同时适用于数字和颜色？

Question

现在我有这段代码，其中第 1 部分(用于更改范围 slider 编号)仅有效一次，第 2 部分(用于更改颜色)有效。但是，当我删除第 2 部分时，第 1 部分工作正常。谁能帮我吗？

function sliderChange()
{ 
    var sliderVal = document.getElementById("speed").value+"%";    
    document.getElementById("sliderVal").innerHTML = sliderVal; //Part 1

    document.getElementById("speed").oninput = function() {
    this.style.background = 'linear-gradient(to right, #85C1E9 0%, #85C1E9 ' + (this.value-50) + '%, #fff ' + (this.value-50) + '%, white 100%)'
    }; //Part 2
}

Answer 1

oninput属性存储一个函数，每当范围 slider 的值发生变化时就会调用该函数。

所以，假设您在 HTML 中执行类似的操作:

<input type="range" min="1" max="100" value="50" class="slider" id="speed" oninput="sliderChange()">

正如您所知，这将告诉您的 slider 在收到输入时运行“sliderChange”函数。

但是，您的“第 2 部分”实际上将采用“oninput”运行的任何函数并覆盖它:

document.getElementById("speed").oninput = function() { ...

所以，你的第 2 部分实际上是在说，“嘿 slider ，当你收到输入时你正在运行什么函数？那个 sliderChange 函数？实际上应该完全替换为这个改变背景颜色的新函数”。

这意味着 slider 将不再触发“sliderChange”功能。相反，它将触发改变背景的匿名函数(“function(){”和“}”之间的所有内容)。

您只需删除匿名函数并更新背景更改代码以直接在 slider 元素上工作即可解决此问题:

function sliderChange() {
    var sliderVal = document.getElementById("speed").value;    
    document.getElementById("sliderVal").innerHTML = sliderVal + "%"; //Part 1

    document.getElementById("speed").style.background = 'linear-gradient(to right, #85C1E9 0%, #85C1E9 ' + (sliderVal-50) + '%, #fff ' + (sliderVal-50) + '%, white 100%)';
}

这样，每次 slider 接收输入时都会触发相同的“sliderChange”函数，而不是在第一次运行后更改其输入函数。

也就是说，正如其他人所提到的，正常的“开箱即用” slider 样式可能无法按您希望的方式工作，具体取决于您实际使用的浏览器和 slider HTML。祝你好运!