垂直滑块，其中缭绕的酒吧改变颜色取决于选择的价值如何得到较大 [英] Vertical slider, in which the filled bar change colour depending on how large the selected value gets

问题描述

我已经看了看，

Telerik的滑块

ajaxlibrary滑块

jQuery的滑块

jQueryUI的滑块（presently实现）

jqueryui slider (presently implemented)

这是迄今为止我preFER第一和第四选择，但我需要的理想，要看一个值将如何变化较大它充满栏的颜色滑块，所以说绿色= 0-3，黄= 4-7红= 8-10。

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.

任何帮助将非常AP preciated。

any help would be much appreciated.

推荐答案

这可能是一个很好的起点。所有我所做的是改变的基础上的滑块值滑块的背景颜色。

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：
    

HTML:

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

CSS：（只是为了覆盖默认设置）

CSS: (just to override the default settings)

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

这篇关于垂直滑块，其中缭绕的酒吧改变颜色取决于选择的价值如何得到较大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！