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>  <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

您必须标识自己的inputs和outputs，以便以某种方式链接它们。例如，您可以为id元素提供input，并为输出提供与相关class的ID匹配的input名称。使用简单的选择器，您可以定位适当的element进行修改。像这样：

<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>

然后：

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

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

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

javascript code fix for multiple range slider inputs

1 个答案: