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

alex picture alex · Jun 21, 2010 · Viewed 13.5k times · Source

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.

Answer

Nick Craver picture Nick Craver · Jun 21, 2010

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.