垂直滑块，其中填充的条形会根据所选值的大小改变颜色

Question

我已经看过了，

telerik slider

ajaxlibrary slider

jQuery slider

jqueryui slider (目前已实现)

到目前为止，我更喜欢第一个和第四个选项，但理想情况下我需要一个滑块，它取决于一个值有多大会改变它的填充条颜色，所以说绿色= 0-3，黄色= 4-7红色= 8-10。

任何人都知道有其他滑块可以做到这一点，或者是关于如何改变这些滑块来做到这一点。

我还需要记录滑块的值，以防任何建议的滑块不这样做，并且可能会将滑块放在图像上，以防任何建议的滑块可能具有内置的滑块，这将非常有利于我的选择。

任何帮助都将不胜感激。

Answer 1

这可能是一个很好的起点。我所做的就是根据滑块的值改变滑块的背景颜色。

http://jsfiddle.net/HUXpg/1/

$(function() {

    $("#slider-vertical").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function(event, ui) {
            $("#amount").val(ui.value);
            var g = parseInt(ui.value <= 50 ? 255 : 255 - ((ui.value-50)*(255/50)));
            var r = parseInt(ui.value >= 50 ? 255 : 255 - ((50-ui.value)*(255/50)));
            $(".ui-widget-header").css("background-color", "rgb("+r+","+g+",0)");  
        }
    });
    $("#amount").val($("#slider-vertical").slider("value"));
});

HTML：

<p>
    <label for="amount">Volume:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

CSS：(只是为了覆盖默认设置)

.ui-widget-header {
     background-image: none;
     background-color: rgb(255, 200, 0);   
}