Horizontale JQuery UI Slider

Question

Ich möchte das gleiche wie folgt, aber horizontal erreichen. Ich habe versucht, die Ausrichtung auf horizontal zu ändern und sie sogar ganz auszulassen, sodass sie standardmäßig horizontal ist, die Farbe jedoch standardmäßig auf orange. Ich verwende ASP.NET.

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

Answer 1

Ich fühle es ein bisschen schwer zu verstehen, was Sie wollen 100%

aber ich schaffte es Horizontal für Sie.

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