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

我已经看过了，

泰勒里克滑块 http://demos.telerik.com/aspnet-mvc/Slider?theme=vista

ajax库滑块 http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/slider/slider.aspx

jQuery 滑块 http://www.asp.net/ajaxLibrary/jQueryCodeSamplesMVC/Slider/SimpleSlider

jqueryui 滑块 http://jqueryui.com/demos/slider/#slider-vertical（目前已实施）

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

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

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

任何帮助将非常感激。

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

http://jsfiddle.net/HUXpg/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);   
}