根据选定的值更改HTML 5范围滑块

Question

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

您拖动的实际圆圈标记我希望能够在移动和更改值时更改此设计。下面的示例从1移动到10.我想在更改值时更改颜色。

有什么想法吗？

<label for=weight>Party Scale</label>
<input type=range id=weight min=0 value=0 max=10 step=1>

谢谢，

路易斯

Answer 1

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

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

Demo Here

JS

typeOfparams

Answer 2

您可以尝试添加：

 -webkit-appearance: none;

然后你可以改变

 background-color: blue;

这里有一个小例子： https://jsfiddle.net/rv9xqwq6/1/

Answer 3

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

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

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

然后，您可以使用input事件侦听光标移动，并在动态创建的样式表中添加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+" } ";

})

https://jsfiddle.net/rv9xqwq6/8/

一些有用的链接：

http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
http://codepen.io/thebabydino/pen/jEXjVE
http://trevan.co/custom-range-inputs-with-css-javascript/