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

Question

我目前正在使用 rangeslider.js。在我的页面中，我计划将两个输入转换为运行ge 滑块。作为 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();
    }
});

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

<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" />

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

How to use two range sliders in one page?

javascript

jquery

html

responsive

rangeslider