垂直滑块，其中填充的条会根据所选值的大小改变颜色 [英] Vertical slider, in which the filled bar change colour depending on how large the selected value gets

问题描述

我已经看过了，

telerik 滑块

ajaxlibrary 滑块

jQuery 滑块

jqueryui 滑块(目前已实现)

到目前为止，我更喜欢第 1 和第 4 个选项，但理想情况下，我需要一个滑块，它取决于一个值有多大会改变它的填充条颜色，所以说绿色 = 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.

任何帮助将不胜感激.

推荐答案

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

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:(只是为了覆盖默认设置)

CSS: (just to override the default settings)

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

这篇关于垂直滑块，其中填充的条会根据所选值的大小改变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！