How to use two range sliders in one page?

Question

I'm currently using rangeslider.js. In my page, there are two inputs that I plan to convert to range sliders. Being new to the JS, I tried to convert one first, and it works. So initlayy, I had this in the HTML:

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

And this code to make the slider work:

$('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();
    }
}); 

However, I ran into trouble when I tried to add a second range slider:

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

It seems that the second slider isn't being recorgnized. I can't even get the sliding part to work.

Then, I tried to change the code up there to

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

I thought that it would solve the problem by specifying that particular input to work for those codes, but it didn't.

How do I use two different sliders in one page? Either sliders are supposed to represent different fileds and are supposed to do different functions.

Please help.

Answer 1

i think your problem lies somewhere else, I just entered your code on JSBin and noticed an error in the console: Cannot read property 'split' of undefined this is highlighted on this line:

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

So something is wrong with how you're trying to access the date labels and this stops all further code from being executed, so the other sliders will never render. Once i fixed this issue, i was able to render multiple sliders without an issue.

Your problem is that your code is looking for a labels attribute and then trying to process it, but you did not actually set any labels. Either you'll have to remove the label related code in your javascript, or add some labels to the DOM elements e.g.

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