Javascript 根据选定的值更改HTML5范围滑块

我想在HTML5范围内创建一个自定义标记

您拖动的实际圆标记我希望能够在它们移动和更改值时更改其设计。下面的示例从1移动到10。我想改变颜色，因为他们改变了价值

有什么想法吗

派对规模

您可以尝试添加：

 -webkit-appearance: none;

然后你可以改变

 background-color: blue;

这里有一个小例子：

---

HTML5的范围是有限的。你最好使用像这样的插件，它有更多的选择，特别是对于你想要实现的目标

下面是我用它做的一个例子：

JS

---

首先，您必须重置输入范围的外观，至少对于基于webkit和gecko的浏览器：

#myRange {
    -webkit-appearance: none;
}
#myRange::-moz-range-thumb{
    -moz-appearance: none;
}
#myRange::-webkit-slider-thumb {
    -webkit-appearance: none;
}

您还必须添加一些规则，因为现在不再定义元素的外观（参见下面的提琴）

然后，您可以通过

input

事件监听光标移动，并在Dynamicly创建的样式表中添加css规则：

$("#myRange").on("input", function (evt) {
    if (evt.target.value > 50) 
        var rule= "background:red";
    else 
        var rule= "yellow"

    sheet.textContent = 
            "#myRange::-webkit-slider-thumb{ "+rule+" } " +
            "#myRange::-ms-thumb{ "+rule+" } " +
            "#myRange::-moz-range-thumb{  "+rule+" } ";

})

一些有用的链接：

---

您能发布您尝试过的内容吗？什么是“这”？=>当用户访问时，您希望更改什么？价值是什么？他们在动什么？你的意思是“当他们拖动它时”？按要求添加。这是你移动的标记，我希望在你移动它的过程中改变它（即改变值）。好的，我已经发布了一个答案，希望对你有所帮助。这里有一个小例子：根据我对问题的理解，他想改变“句柄”，而不是范围本身的背景。

$("#myRange").on("input", function (evt) {
    if (evt.target.value > 50) 
        var rule= "background:red";
    else 
        var rule= "yellow"

    sheet.textContent = 
            "#myRange::-webkit-slider-thumb{ "+rule+" } " +
            "#myRange::-ms-thumb{ "+rule+" } " +
            "#myRange::-moz-range-thumb{  "+rule+" } ";

})