Как вывести из двух инпутов range их value и записать в один блок result?

Сам код HTML

<div class="wrap">
  <div class="input__item">
    <input class="input__range" type="range" min="0" max="450" value="0" step="10">
    <span class="input__value">0 м</span>
  </div>
  <div class="input__item">
    <input class="input__range" type="range" min="0" max="150" value="0" step="10">
    <span class="input__value">0 м</span>
  </div>
  <div class="result">0 м</div>
</div>

CSS

.input__item {
  margin-bottom: 15px;
}

JS

const inputRange = document.querySelectorAll('.input__range');

inputRange.forEach(el => {
  el.addEventListener('input', (e) => {
    const target = e.target;
    let val = target.value;
    let text = target.parentElement.querySelector('.input__value');
    let num = parseFloat(target.value / 100);
    text.textContent = num + ' m';
  });
});