Is there a way to make the jQuery UI slider start with 0 on top instead of on bottom?
13,763
Solution 1
Don't reverse it, take the easy way out :) Just subtract the value from your max, for example:
$("#slider-vertical").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
slide: function(event, ui) {
$("#amount").val(100 - ui.value);
}
});
This just goes max-value
, effectively reversing it, you can see a quick demo here.
Solution 2
Probably, usage of negative values will be more elegant:
$('#slider').slider({
min: -100,
max: 0,
value: -50,
step: 1
});
Just use absolute value, instead of an actual one, where you need it.
Solution 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...
Author by
user3167101
I like to make stuff. Check out my blog. You can email me at alex at my domain. My dotfiles, if you're curious :)
Updated on June 08, 2022Comments
-
user3167101 about 2 years
Look at this demo of the jQuery UI Slider.
Notice how when the handle is down the bottom, the value is 0?
Is there a way to reverse this, so the handle up the very top is 0, and the handle down the bottom is the max range?
I've played a bit with the options, but so far have been unable to get it to work.