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>

When I use multiple inputs all sliders manipulate the output of the first input only. the other outputs dont work — Omer Raja
– Omer Raja, Commented Jun 25, 2015 at 19:05
I have updated the code. have a look at the results of the code please. the second input slider also changes the first output — Omer Raja
– Omer Raja, Commented Jun 25, 2015 at 19:07
The offending line is var output = document.querySelectorAll('output')[0]; which says that only the first <output> should be used. — goldins
– goldins, Commented Jun 25, 2015 at 19:19

Julien Grégoire · Accepted Answer · 2015-06-25 21:19:38Z

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

answered Jun 25, 2015 at 21:19

Julien Grégoire

17.2k4 gold badges34 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javascript code fix for multiple range slider inputs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related