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

Question

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 1

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 .

Answer 2

Probably, usage of negative values will be more elegant:

$('#slider').slider({
    min: -100,
    max: 0,
    value: -50,
    step: 1
});

Just use absolute value, instead of an actual one, where you need it.

Answer 3

$(function() {
    $("#slider-vertical").slider({
      orientation: "vertical",
      range: "max", // <--- needed...
      min: 0,
      max: 100,
      value: 60,
      slide: function(event, ui) {
        $("#amount").val(100 - ui.value); // basic math operation..
      }
    });
  });

demo...​

Answer 4

You could just turn it upside down using css3.

#slider {
     -moz-transform: rotate(180deg);
     -webkit-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
}