$.noUiSlider Reverse Direction of Vertical Slider

Question

$.noUiSlider (http://refreshless.com/nouislider/)

Is there a way to reverse the direction of a vertical slider? Meaning, can the min value be at the bottom and max value at the top? I achieved it by setting the range to min: -15, max: 0 but that results in negative values which you then have to convert.

Is there a proper way to do it? There is a way to reverse direction for horizontal sliders but I can't find anything about sliders in the vertical orientation.

Thanks!

Compendious

Have you tried reversing the min and max values? – Felix

I did. Just seems hacky because I end up with negative values. Just wondering if there was a proper way to do it without having to convert to absolute value after the fact. – Compendious

What if min was +15 and max was 0? – Felix

Yeah, I guess that's the way you have to do it. I don't see anything in the docs about reversing it. For horizontal there are "rtl" and "ltr" settings. Thanks! – Compendious

Answer 1

The direction option applies to vertical sliders too. Setting rtl sets bottom-to-top behaviour.

See this example for more information.

Metallize

Hey, thanks for responding. I figured that out after some testing. However, when I did that I noticed that linked input stopped working. Is there any way to do the bottom to top behavior with a linked input? I can make it work by reversing the min/max values and using negative. For example: set min: -15 and max: 0 (start: -5). Doing that the linked input works but of course, it reports a negative value. Is there an easy way to convert to absolute value so the input isn't reporting negative? – Compendious

I've added an example to the answer. – Metallize

I have it working now. Thanks! I appreciate your help. Overall, great job on the control. It works well. – Compendious