jQuery nouislider垂直方向不起作用

Question

你可以请一个look at this Demo让我知道为什么这个垂直滑块甚至没有出现？原始演示文稿在This Page上，但它对我不起作用！

$("#sample-showcase").noUiSlider({
     range: [0, 100]
    ,start: [20, 80]
    ,handles: 2
    ,step: 10
    ,margin: 20
    ,connect: true
    ,direction: 'rtl'
    ,orientation: 'vertical'
    ,behaviour: 'tap-drag'
    ,serialization: {
         mark: ','
        ,resolution: 0.1
        ,to: [ $("#value-input"),
              [$('#value-span'), 'html'] ]
    }
});

或者你可能知道任何垂直滑块来介绍我吗？我谷歌但没有找到任何东西 感谢

Answer 1

滑块已正确初始化;你的js没有错。

由于CSS框模型的性质，元素不会采用默认高度。 noUiSlider无法选择任意值，因此它不会设置任何值。因此，要使滑块正确显示：

<强> CSS：

#sample-showcase { height: 300px; }