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

Question

查看jQuery UI Slider的这个demo。

注意当手柄在底部下方时，值是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，有效地将其翻转，you can see a quick demo here。

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

demo...

Answer 4

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

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