看看这个jQuery UI Slider 的演示。
注意当手柄在底部时,值是 0 吗?
有没有办法扭转这种情况,所以最上面的手柄是0,而下面的手柄是最大范围?
我已经玩了一些选项,但到目前为止还无法让它发挥作用。
看看这个jQuery UI Slider 的演示。
注意当手柄在底部时,值是 0 吗?
有没有办法扭转这种情况,所以最上面的手柄是0,而下面的手柄是最大范围?
我已经玩了一些选项,但到目前为止还无法让它发挥作用。
不要颠倒它,采取简单的方法:)只需从最大值中减去该值,例如:
$("#slider-vertical").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
slide: function(event, ui) {
$("#amount").val(100 - ui.value);
}
});
就这样max-value
,有效地逆转它,你可以在这里看到一个快速演示。
可能,负值的使用会更优雅:
$('#slider').slider({
min: -100,
max: 0,
value: -50,
step: 1
});
只需在需要的地方使用绝对值,而不是实际值。
$(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>
您可以使用 css3 将其颠倒过来。
#slider {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}