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