JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<input type="range" id="range1" class="range" min="0" max="255" step="1" value="0">
<span id="value1" class="value">0</span>

<input type="range" id="range2" class="range" min="0" max="255" step="1" value="0">
<span id="value2" class="value">0</span>
  
<input type="range" id="range3" class="range" min="0" max="255" step="1" value="0">
<span id="value3" class="value">0</span>

JavaScript

[].forEach.call(document.getElementsByClassName('range'), (node, i) => {
    node.addEventListener('input', (e) => {
      const valueSpan = document.getElementById(`value${i+1}`);
      valueSpan.innerHTML = e.target.value;
    });    
});