html的slider怎么在图片下面,javascript – HTML5滑块.如何使用’noUiSlider’

下午好,

我正在尝试实现’noUIslider’滑动条(http://refreshless.com/nouislider/),即使在他们主页上的第一个例子也在努力.

我已经下载了各种css和js并将它们解压缩到一个文件夹中.然后我写了下面的html页面,但看起来没有什么工作正常(空白的html页面).关于我错过的任何线索？

非常感谢你的帮助,祝你周日愉快.

最好的祝愿,

洛朗

#showcase {

margin: 0 20px;

text-align: center;

}

#range {

height: 300px;

margin: 0 auto 30px;

}

#value-span,

#value-input {

width: 50%;

float: left;

display: block;

text-align: center;

margin: 0;

}

var range = document.getElementById('range');

noUiSlider.create(range, {

start: [ 20, 80 ], // Handle start position

step: 10, // Slider moves in increments of '10'

margin: 20, // Handles must be more than '20' apart

connect: true, // Display a colored bar between the handles

direction: 'rtl', // Put '0' at the bottom of the slider

orientation: 'vertical', // Orient the slider vertically

behaviour: 'tap-drag', // Move handle on tap, bar is draggable

range: { // Slider can select '0' to '100'

'min': 0,

'max': 100

},

pips: { // Show a scale with the slider

mode: 'steps',

density: 2

}

});

var valueInput = document.getElementById('value-input'),

valueSpan = document.getElementById('value-span');

// When the slider value changes, update the input and span

range.noUiSlider.on('update', function( values, handle ) {

if ( handle ) {

valueInput.value = values[handle];

} else {

valueSpan.innerHTML = values[handle];

}

});

// When the input changes, set the slider value

valueInput.addEventListener('change', function(){

range.noUiSlider.set([null, this.value]);

});