¿Hay alguna manera de hacer que el control deslizante jQuery UI comience con 0 en la parte superior en lugar de en la parte inferior?

Question

Mire este demo del control deslizante jQuery UI.

Observe cómo cuando el mango está abajo, el valor es 0?

¿Hay alguna manera de revertir esto, por lo que la manivela de la parte superior es 0, y el asa de la parte inferior es el rango máximo?

He jugado un poco con las opciones, pero hasta ahora no he podido hacerlo funcionar.

Answer 1

No invierta ella, tomar el camino más fácil :) Sólo resta el valor de su máximo, por ejemplo:

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

Esto sólo sirve max-value, invirtiendo con eficacia, you can see a quick demo here.

Answer 2

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

Probablemente, el uso de valores negativos serán más elegantes:

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

sólo tiene que utilizar valor absoluto, en lugar de uno real, donde lo necesite.

Answer 4

Podrías darle la vuelta usando css3.

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