如何让我的范围滑块同时适用于数字和颜色？

Question

现在我有这个代码，其中第 1 部分（用于更改范围滑块编号）仅工作一次，第 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属性存储一个函数，每当范围滑块的值发生变化时都会调用该函数。

所以，假设你在你的 HTML 中做这样的事情：

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

正如您已经知道的那样，这将告诉您的滑块在收到输入时运行“sliderChange”函数。

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

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

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

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

您可以通过删除匿名函数并更新背景更改代码以直接在滑块元素上工作来解决此问题：

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%)';
}

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

也就是说，正如其他人所提到的，根据浏览器和您实际使用的滑块 HTML，为普通的“开箱即用”滑块设置样式可能无法按您希望的方式工作。 祝你好运！

Answer 2

document.getElementById("speed").oninput为 ID speed元素上的input事件注册一个事件监听器（你没有共享 HTML，所以我不知道是哪一个。可能是滑块）。 如果此元素从不触发input事件，则不会执行分配的函数。

如果我像这样更新它：

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

 <input type="range" id="speed" /> <div id="sliderVal"></div>

你可以看到，代码执行得很好。

除了，您没有在<input type="range" />上看到背景。 这很有可能，因为浏览器不允许这样的样式。 （检查员告诉我，该属性仍然被应用）。

Answer 3

解决在html中添加onmousemove="sliderChange()"(包括onChange)