JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<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

var rangeInputs = document.getElementsByClassName('range');

for (let i = 0; i < rangeInputs.length; i++) {
    rangeInputs[i].addEventListener('input', (e) => {
      const valueSpan = document.getElementById(`value${i+1}`);
      valueSpan.innerHTML = e.target.value;
    });    
}