Search code examples
javascriptjqueryjquery-uiuislider

Is there a way to make the jQuery UI slider start with 0 on top instead of on bottom?

Look at this demo of the jQuery UI Slider.

Notice how when the handle is down the bottom, the value is 0?

Is there a way to reverse this, so the handle up the very top is 0, and the handle down the bottom is the max range?

I've played a bit with the options, but so far have been unable to get it to work.

Solution

  • Don't reverse it, take the easy way out :) Just subtract the value from your max, for example:

    $("#slider-vertical").slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    slide: function(event, ui) {
        $("#amount").val(100 - ui.value);
    }
});

    This just goes max-value, effectively reversing it, you can see a quick demo here.