Вертикальный ползунок, в котором заполненная полоса меняет цвет в зависимости от размера выбранного значения

Question

Я уже посмотрел,

Telerik Slider

ajaxlibrary слайдер

jQuery slider

Слайдер jqueryui (в настоящее время реализовано)

, что до сих пор я предпочитаю 1-й и 4-й варианты, но в идеале мне нужен слайдер, который в зависимости от того, насколько велико значение, изменит цвет заполненной полосы, так что зеленый = 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);   
}