CODEWITHSUNDEEP
javascripthtml
Omer Raja
Omer Raja

Reputation: 1077

javascript code fix for multiple range slider inputs

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>

Upvotes: 0

Views: 3206

Answers (1)

Julien Gr&#233;goire
Julien Gr&#233;goire

Reputation: 17114

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

Upvotes: 1

Related Questions