15

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.

alex
  • 479,566
  • 201
  • 878
  • 984

4 Answers4

27

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.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • The trouble with this is that the 'fill in' is still growing from bottom to top. I also want a top-to-bottom version of this, with the fill-in working that way too. Time to start hacking... – Elbin Oct 04 '12 at 10:22
  • 1
    @IainMNorman doesn't work for me. absolute value answer is most workable for me. –  Mar 31 '13 at 16:58
  • Issue with this approach is if you want to include other buttons which jump/set a specific value. `slide` is never triggered but `change` is, however then modifying the value in `change` is somewhat circular. The position of the slider vs the numeric value gets out of sync. – MrYellow Aug 23 '15 at 21:07
16

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.

sviklim
  • 1,054
  • 1
  • 15
  • 30
  • 5
    until they have a new option for this issue, this is the correct answer. i wish i could +2 considering the cleverness –  Mar 31 '13 at 16:57
  • 4
    Much less hacky than the accepted answer. Thank you. – mawburn Aug 04 '14 at 14:24
  • if you start below zero and therefore need negative values, use value * -1 rather than math.abs – CodeToad Sep 29 '15 at 15:30
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... ​

Reigel Gallarde
  • 64,198
  • 21
  • 121
  • 139
-1

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);
}
Michael A. Schaffrath
  • 1,992
  • 1
  • 14
  • 23