How to show only the desired values ​​in the range?

Question

JavaScript

Help fix the code, it is necessary that only values ​​in a specific range be shown, and not all that are greater than or equal to the specified value, it is necessary that the old values ​​\u200b\u200bare overwritten and "sizes like XXS or XXL for a certain range of digital values ​​\u200b\u200bare shown."

<div class="ctrl">
  <span id="view">80</span>
  <input id="num" type=number min="80" max="200" step="1" value="80">
  <input id="range" type="range" min="80" max="200" step="1" value="0">
</div>
<div>
  <div class="good">
  <span>Размер</span>
  <p class="option" data-from="80">XXS-11"</p>
   <p class="option" data-from="129">XXS-11"</p>
  <p class="option" data-from="150"> XS-13”</p>
  </div>
</div>

document.addEventListener('DOMContentLoaded', function(){

  const num = document.getElementById('num');
  const rng = document.getElementById('range');
  const view = document.getElementById('view');
  const goods = document.querySelectorAll('.good');
  const set = val => {
    num.value = val;
    rng.value = val;
    view.textContent = val;
    [...goods].forEach(good => {
      const options = good.querySelectorAll('.option');
      [...options].forEach(option => {
        option.style.display = val >= +option.dataset.from ? 'block': 'none';
  
      });
    });
  }

  rng.addEventListener('input', () => set(rng.value));
  num.addEventListener('change', () => set(num.value));

});

#view {
  display: block;
  text-align: center;
  font-size: 22pt;
}
.ctrl {
  width: 200px;
  position: relative;
}
input {
  display: block;
  width: 100%;
}
.good {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  padding: 5px;
  margin: 5px;
  border: 1px solid silver;
}
.good .option {
  display: none;
}