Question

我目前正在使用rangelider.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" />

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

1 个答案: