Horizontal JQuery UI Slider

Question

I want to achieve the same as follows but horizontal. I tried changing the orientation to horizontal, and even leaving it out completely so it defaults to horizontal, however the colour defaults to orange. I'm using ASP.NET.

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

Answer 1

I feel it's a bit hard to understand what you want 100%

but I created it Horizontal for you.

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