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

Question

我已经看过

telerik slider

ajaxlibrary滑块

jQuery 滑块

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