jQuery nouislider 垂直方向不起作用

Question

您可以拿一个look at this Demo吗？让我知道为什么这个垂直 slider 甚至没有出现？原始演示位于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'] ]
    }
});

或者您可能知道任何垂直 slider 可以介绍我吗？我用谷歌搜索但没有找到任何东西谢谢

Answer 1

slider 已正确初始化；你的js没有错。

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

CSS:

#sample-showcase { height: 300px; }