JSFiddle - React, Tailwind, and code Playground

HTML

<input type="range" min="0" max="100" value="100" class="sliders">
<div class="results"></div>

<input type="range" min="0" max="100" value="100" class="sliders">
<div class="results"></div>

<input type="range" min="0" max="100" value="100" class="sliders">
<div class="results"></div>

JavaScript

const events = ['input', 'change', 'mouseup']

const sliders = document.querySelectorAll('.sliders')

sliders.forEach((slider, index) => {
  slider.dataset.event = events[index]
  slider.addEventListener(events[index], function() {
    this.nextElementSibling.textContent = this.dataset.event + ': ' + this.value
  })
  
  //init values
  slider.nextElementSibling.textContent = slider.dataset.event + ': ' + slider.value
})