javascript code fix for multiple range slider inputs

Question

I cant use multiple range sliders on a single page. All inputs change only the first output of the page.

the example is on the following link.

http://codepen.io/andreruffert/pen/jEOOYN

 $(function() { var output = document.querySelectorAll('output')[0]; $(document).on('input', 'input[type="range"]', function(e) { output.innerHTML = e.target.value; }); $('input[type=range]').rangeslider({ polyfill: false }); });

 body { padding: 50px; max-width: 500px; margin: 0 auto; text-align: center; } output { display: block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- rangeslider.js example https://github.com/andreruffert/rangeslider.js by André Ruffert - @andreruffert --> <h2>Floating point boundaries</h2> <input type="range" value="0.5" step="0.1" min="0.1" max="3.0"> <br> <output>0.5</output> <br> <input type="range" value="0.5" step="0.1" min="0.1" max="3.0"> <br> <output>0.5</output>

Answer 1

You have to identify your inputs and outputs so you can link them in some way. For example you could give an id to your input element, and give the output a class name matching the id of the related input . And with a simple selector you can target the proper element to modify. Like this:

<h2>Floating point boundaries</h2>
<input id="floating" type="range" value="0.5" step="0.1" min="0.1" max="3.0">
<br>
<output class="floating">0.5</output>
<h2>Other slider</h2>
<input id="other" type="range" value="0.5" step="0.1" min="0.1" max="3.0">
<br>
<output class="other">0.5</output>

then:

$(document).on('input', 'input[type="range"]', function(e) {

            document.querySelector('output.'+this.id).innerHTML = e.target.value;
      });

http://codepen.io/anon/pen/jPajvp