垂直noUiSlider滑块：设置最大值在上最小值在下时功能异常

你应该是想让垂直滑块的最大值显示在顶部、最小值在底部，但用direction: 'rtl'没达到预期效果对吧？这个参数其实是针对水平滑块的左右方向控制的，对于垂直滑块，我们需要用inverted: true来实现上下范围的反转。

问题原因 #

noUiSlider的direction参数主要作用于水平滑块，用来切换滑块的起始方向（从左到右/从右到左）。当滑块设置为垂直方向（orientation: 'vertical'）时，这个参数不会影响上下的范围顺序，所以才会出现滑块不按预期工作的情况。

修正后的代码 #

把direction: 'rtl'替换成inverted: true，就能实现你想要的垂直滑块效果了：

noUiSlider.create(document.getElementById('slider-range'), {
    start: [20, 50],
    orientation: 'vertical',
    inverted: true, // 关键参数，反转垂直滑块的范围顺序
    tooltips: [true, true],
    range: {
        'min': [10],
        'max': [90]
    }
});

额外说明 #

• 如果之后需要调整水平滑块的方向，再使用direction: 'rtl'就没问题；
• inverted参数专门用来反转垂直滑块的上下范围，也可以用来反转水平滑块的左右范围（不过水平方向用direction会更直观）；
• 测试时记得确保noUiSlider的CSS样式已正确引入，垂直滑块需要设置合适的高度才能正常显示哦。

内容的提问来源于stack exchange，提问作者Sakti Debnath