<div>
  <input type="range" name="quantity" min="0" max="100">
  <output for="quantity"></output>
</div>

<div>
  <input type="range" name="quantity2" min="0" max="100">
  <output for="quantity2"></output>
</div>

<div>
  <input type="range" name="quantity3" min="0" max="100">
  <output for="quantity3"></output>
</div>

<div>
  <input type="range" name="quantity4" min="0" max="100">
  <output for="quantity4"></output>
</div>

body, html {
  height: 100%;
}

body {

}

const outputs = document.querySelectorAll('output');

document.addEventListener('DOMContentLoaded', bindOutputs);

function bindOutputs(){
  Array
    .from(outputs)
    .map(getInputName)
    .map(getInputByName)
    .forEach(bindInput)
}

function setStateFor(outputElement){
  return event => outputElement.value = event.target.value;
}

function getInputName(outputElement){
  return outputElement.getAttribute('for');
}

function getInputByName(inputName) {
  return document.querySelector(`input[name=${inputName}]`);
}

function bindInput(inputElement, index) {
  const fn = setStateFor(outputs[index]);
  inputElement.addEventListener('input', fn);
  fn({ target: inputElement });
}