Горизонтальный слайдер пользовательского интерфейса JQuery

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