如何在一页中使用两个范围滑块?

Question

我目前正在使用rangeslider.js。在我的页面中，我计划将两个输入转换为范围滑块。作为 JS 的新手，我尝试先转换一个，它有效。如此不知所措，我在 HTML 中有这个：

<div class="rangeslider-wrap">
<input type="range" min="0" max="100" value="40" id="txtInstruction2-2-2" class="inpBase"/>
</div>

而这段代码使滑块工作：

$('input[type="range"]').rangeslider({
// Feature detection the default is `true`.
// Set this to `false` if you want to use
// the polyfill also in Browsers which support
// the native <input type="range"> element.
polyfill: false,
// Default CSS classes
rangeClass: 'rangeslider',
disabledClass: 'rangeslider--disabled',
horizontalClass: 'rangeslider--horizontal',
fillClass: 'rangeslider__fill',
handleClass: 'rangeslider__handle',
// Callback function
onInit: function() {
$rangeEl = this.$range;
// add value label to handle
var $handle = $rangeEl.find('.rangeslider__handle');
var handleValue = '<div class="rangeslider__handle__value" style="padding-top: 8px">' + this.value + '%</div>';
$handle.append(handleValue);
// get range index labels 
var rangeLabels = this.$element.attr('labels');
rangeLabels = rangeLabels.split(', ');
// add labels
$rangeEl.append('<div class="rangeslider__labels"></div>');
$(rangeLabels).each(function(index, value) {
$rangeEl.find('.rangeslider__labels').append('<span class="rangeslider__labels__label">' + value + '</span>');
})
},
// Callback function
onSlide: function(position, value) {
var $handle = this.$range.find('.rangeslider__handle__value');
$handle.text(this.value + "%");
$("#txtInstruction2-2").val(this.value);
$("#txtInstruction2").val(this.value);
$("#lblInstruction2").html(this.value);
fnComputeAll();
},
// Callback function
onSlideEnd: function(position, value) {
$("#txtInstruction2-2").val(this.value);
$("#txtInstruction2").val(this.value);
$("#lblInstruction2").html(this.value);
fnComputeAll();
}
}); 

但是，当我尝试添加第二个范围滑块时，我遇到了麻烦：

<div class="rangeslider-wrap">
<input type="range" min="0" max="100" value="40" id="txtInstruction10-2-2" class="inpBase"/>
</div>

似乎第二个滑块没有被重新定义。我什至无法让滑动部分工作。

然后，我尝试将那里的代码更改为

$("#txtInstruction2-2-2").rangeslider({

我认为它可以通过指定特定输入来为这些代码工作来解决问题，但事实并非如此。

如何在一个页面中使用两个不同的滑块？任何一个滑块都应该代表不同的文件，并且应该执行不同的功能。

请帮忙。

Answer 1

我认为您的问题出在其他地方，我刚刚在 JSBin 上输入了您的代码，并在控制台中注意到一个错误：Cannot read property 'split' of undefined这一行突出显示

：

// get range index labels 
var rangeLabels = this.$element.attr('labels');
rangeLabels = rangeLabels.split(', ');

因此，您尝试访问日期标签的方式有问题，这会阻止执行所有进一步的代码，因此其他滑块永远不会呈现。解决此问题后，我就可以毫无问题地渲染多个滑块。

您的问题是您的代码正在查找标签属性，然后尝试处理它，但您实际上没有设置任何标签。要么你必须删除javascript中与标签相关的代码，要么向DOM元素添加一些标签，例如

<input labels="test,labels" type="range" min="0" max="100" value="40" id="txtInstruction2-2-2" class="inpBase" />