css - 水平 JQuery UI slider

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"));
});