Vertical slider, in which the filled bar change co

问题:

I've already looked at,

telerik slider

ajaxlibrary slider

jQuery slider

jqueryui slider (presently implemented)

which so far I prefer the 1st and 4th options but I ideally need a slider which depending on how large a value will change it's filled bar colour, so say green = 0-3, yellow = 4-7 red = 8-10.

Anybody know of any other sliders which can do this or instead on how to change any of these sliders to do it.

I also need to record the slider value in case any suggested sliders don't do that and am possibly going to place the slider over an image in case any suggested sliders might have that built in which would greatly favor that slider as my choice.

any help would be much appreciated.

回答1:

this could be a good place to start. All i've done is change the background colour of the slider based on the value of the slider.

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: (just to override the default settings)

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