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.

jquery slider start at top?

I know you can make the slider go vertical, but is there a way to start it at the top and make it go to the bottom rather then the bottom and going to the top? Regards,

How do I make a top jquery slider go from bottom to top?

I ran across this amazing slider but I would like to make it open from the bottom up, I have tried a bunch of stuff, but nothing seems to work for me. I changed the the box’s (page container) css from

How to make content start in the middle/top instead of the bottom?

I’m using this javascript to make images scroll vertically from the bottom till the top, but I can’t figure out how to make the images start scrolling when the frame is filled. Right now it’s empty wh

jQuery UI slider – can’t slide to 0

jQuery 1.3.2 / jQueryUI 1.7 / Slider $(#slider).slider({ range: min, min: 0, max: 40, value: 0, slide: function(event, ui) { CalculateOrder(event, ui); } }); it starts off just fine, but after I

Starting position at bottom of MooTools slider class instead of top

Is there a way to hook into the MooTools Slider class, so the starting position of the knob is at the bottom (step 0) of the bar and you drag the knob up to get to the top of the bar (step 100). This

Make jQuery UI Slider clickable not draggable

I’m using jQuery UI 1.10.3. I’m looking to make an instance of the slider widget non-draggable. I want the user to be able to click to values along the slider only. I have tried eventDefault on the sl

jQuery UI Position to set “right” and “bottom” instead of “left” and “top”

OK, here is my question. Using jQuery UI position. It is possible to position an element in relation to another element on the screen. It sets the left and top css properties on the element being posi

Animate Height Bottom to Top Instead of Top to Bottom

How can I achieve height animation in reverse? Instead of the typical animation starting from the top and working its way down, how can I have it start the animation from the bottom of the element an

jquery ui slider -reverse starting and ending position

I have a vertical slider.Is there any way that I can make the handler work from top to bottom? $( .dragscrollbar ).slider({ orientation: vertical });

jquery ui dialog top always > 0

I’m using the jquery ui dialog for viewing a form. This form has a large height value, so the top of the dialog is 0px. I want to change this because there is a menu bar at the top of my window. Is th

Answers

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.

$(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…

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.

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