Есть ли способ заставить слайдер jQuery UI начинаться с 0 сверху, а не снизу?

Question

Посмотрите на эту демонстрацию слайдера пользовательского интерфейса jQuery.

Обратите внимание, как, когда ручка находится внизу, значение равно 0?

Есть ли способ изменить это так, чтобы ручка вверху вверх была равна 0, а ручка внизу - максимальный диапазон?

Я немного поиграл с опциями, но пока не смог заставить его работать.

Answer 1

Не переворачивайте его, выбирайте легкий путь :) Просто вычтите значение из вашего максимума, например:

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

Это просто идет max-value, фактически изменяя его, Вы можете увидеть быстрое демо здесь .

Answer 2

Вероятно, использование отрицательных значений будет более элегантным:

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

Просто используйте абсолютное значение вместо фактического, где оно вам нужно.

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

демо ...

Answer 4

Вы можете просто перевернуть его с помощью css3.

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