Javascript 如何使范围滑块同时适用于数字和颜色？

现在我有了这段代码，其中第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
}

---

document.getElementById（“speed”）.oninput

为ID为

speed

的元素上的

input

事件注册一个事件侦听器（您没有共享HTML，所以我不知道是哪个。很可能是滑块）。 如果此元素从未触发

输入

事件，则分配的函数将不会执行

如果我这样更新它：

函数滑块更改（）
{ 
var el=document.getElementById（“速度”）；
var sliderVal=el.value+“%”；
document.getElementById（“sliderVal”）.innerHTML=sliderVal；//第1部分
el.style.background='线性渐变（向右，#85C1E9 0%，#85C1E9'+（this.value-50）+'%，#fff'+（this.value-50）+'%，白色100%）；//第2部分
}
document.getElementById（“速度”）.addEventListener（“更改”，幻灯片更改）
oninput

属性存储一个函数，只要范围滑块的值发生变化，就会调用该函数

因此，假设您正在HTML中执行类似的操作：

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

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

---

document.getElementById（“速度”）.oninput=function（）{…

所以，你的第2部分实际上是说，“嘿，slider，当你收到输入时，你运行的是什么函数？这个

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，设置普通“开箱即用”滑块的样式可能无法按您希望的方式工作。祝您好运！

---

将onmousemove=“sliderChange（）”添加到html（包括onChange）

第1部分不在第2部分那样的事件侦听器中您不是第一个尝试设置范围输入样式的人：或者可以让您了解挑战。当我这样做时，样式100%不起作用，但数字起作用