如何在一页中使用两个范围滑块？答案

【问题标题】：How to use two range sliders in one page?如何在一页中使用两个范围滑块？
【发布时间】：2019-12-28 12:29:45
【问题描述】：

我目前正在使用 rangeslider.js。在我的页面中，我计划将两个输入转换为范围滑块。作为 JS 的新手，我尝试先转换一个，它可以工作。所以 initlayy，我在 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({

我认为它可以通过指定特定输入来处理这些代码来解决问题，但它没有。

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

请帮忙。

【问题讨论】：

标签： javascript jquery html responsive rangeslider

【解决方案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" />

【讨论】：