javascript - 有没有办法让 jQuery UI 滑块从顶部而不是底部的 0 开始？

Question

看看这个jQuery UI Slider 的演示。

注意当手柄在底部时，值是 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..
      }
    });
  });

演示... ​</p>

Answer 4

您可以使用 css3 将其颠倒过来。

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