Как показывать только нужные значения в диапозоне?

Question

[Alexfixer]

Помогите исправить код, необходимо, чтобы показывались значения только в конкретном диапозоне, а не все которые больше или равно заданному значению, нужно, чтобы затирались старые значения и показывались "размеры типа XXS или XXL для определённого диапозона значений цифровых".

<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;
}

Comments

[Сергей Сергей]

В dataset каждого параграфа лучше вписывать не одно значение, а границы того диапазона, который потом сравнивать со значением из ползунка.

data-fromto="80,129"

const [ val1, val2 ] = dataset.fromto.split(',').map( a => +a )

style.display = val1 <= val && val <= val2 ? //...

[Alexfixer]

В html вставил data-fromto="80,129",
а вот в JS:

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 [ val1, val2 ] = dataset.fromto.split(',').map( a => +a );
  const set = val => {
    num.value = val;
    rng.value = val;
    view.textContent = val;
    [...goods].forEach(good => {
      style.display = val1 <= val && val <= val2 ? 'block': 'none';
    });
  }

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

});

Не работает, что не правильно?

[Сергей Сергей]

Определения val1 и val2 должны быть внутри функции перебора option-ов.

[Alexfixer]

Сергей Сергей,

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 [ val1, val2 ] = dataset.fromto.split(',').map( a => +a );
  const set = val => {
    num.value = val;
    rng.value = val;
    view.textContent = val;
    [...goods].forEach(good => {
      const options = good.querySelectorAll('.option');
      [...options].forEach(option => {
        const [ val1, val2 ] = dataset.fromto.split(',').map( a => +a );
        option.style.display = val1 <= val && val <= val2 ? 'block' : 'none';
      });
    });
  }

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

});

Так тоже не работает

[Alexfixer]

Сергей Сергей,
Вот такую штуку надо мне, подойдёт ли такой вариант кода?

[Сергей Сергей]

dataset висит в воздухе, к чему он был привязан? Ошибки пишет, не? из глобального определения val1 val2 надо убрать.

[Alexfixer]

Сергей Сергей, dataset привязан вроде как к "option"? переменные val1 и val2 поправил, в консоле ошибка Uncaught SyntaxError: Missing initializer in const declaration main.js:15
Вот в этой строке: const val1, val2 = option.dataset.fromto.split(',').map( a => +a )

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';*/
        const val1, val2 = option.dataset.fromto.split(',').map( a => +a )
        option.style.display = val1 <= val && val <= val2 ? 'block': 'none';
      });
    });
  }

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

});

[Сергей Сергей]

[ val1, val2 ]

[Alexfixer]

Сергей Сергей, Спасибо большое! Всё работает как надо теперь

[Сергей Сергей]

Бонус. Можно делать пересекающиеся диапазоны или наоборот промежутки, где значению из ползунка не будет соответствовать какой-либо диапазон.

[Alexfixer]

Сергей Сергей, а можете ещё подсказать: Обновляю страницу, пока ползунок не сдвинешь хотя бы на 1 шаг, начальные значения не показываются, не смотря на то что начальное положение ползунка удовлетворяет условию, т.е. входит в диапозон....как исправить?

[Сергей Сергей]

set(rng.value) после

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

[Alexfixer]

Сергей Сергей, Спасибо!