水平 JQuery UI 滑块

Question

我想实现以下相同但水平。我尝试将方向更改为水平，甚至将其完全保留，使其默认为水平，但颜色默认为橙色。我正在使用 ASP.NET。

Vertical slider, in which the filled bar change colour depending on how large the selected value gets

Answer 1

我觉得你100%想要什么有点难以理解

但我为你创建了水平。

Fiddle

Fiddle with Orange color

$(function() {

$("#slider-vertical").slider({
    orientation: "Horizontal",
    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"));
});