JS Калькулятор для input[type="range"]

Question

JS Калькулятор для input[type="range"]

Рейтинг: 1Ответов: 1Опубликовано: 28.03.2023

Столкнулся с вот таким калькулятором на input[type="range"]

const ranges = document.querySelectorAll('.range');
const values = document.querySelectorAll('.range_value');
ranges.forEach(range => {
  range.addEventListener('input', updateValues);
});

function updateValues() {

  let sum = 0;
  for (let i = 0; i < ranges.length; i++) {
    const range = ranges[i];
    const value = values[i];
    const prev = i === 0 ? ranges[ranges.length - 1] : ranges[i - 1];
    const next = i === ranges.length - 1 ? ranges[0] : ranges[i + 1];
    let val = parseInt(range.value);
    sum += val;
    if (sum > 100) {
      val -= sum - 100;
      if (val < 0) val = 0;
      range.value = val;
    }
    value.textContent = range.value;
    if (val !== parseInt(range.value)) {
      range.value = val;
      value.textContent = val;
    }
    prev.max = 100 - (sum - val);
    next.min = val;
  }
}

.label {
  display: block;
}

<form id="form" class="form" name="constructor">
  <p class="form_constructor">Full value: <span class="form_constructor__value">100</span></p>
  <label class="label">
    <input class="range" type="range" value="10" step="1" min="0" max="100" name="soybean">
    <span class="range_value">10</span>
  </label>
  <label class="label">
    <input class="range" type="range" value="30" step="1" min="0" max="100" name="sesame">
    <span class="range_value">30</span>
  </label>
  <label class="label">
    <input class="range" type="range" value="30" step="1" min="0" max="100" name="wheat">
    <span class="range_value">30</span>
  </label>
  <label class="label">
    <input class="range" type="range" value="30" step="1" min="0" max="100" name="corn">
    <span class="range_value">30</span>
  </label>

</form>

Задача сделать функцию, которая будет следить за значениями input[type="range"] и менять их. Должны выполняться следующие условия.

Сумма значений всех 4 input[type="range"] должна всегда быть 100.
Если при изменении одного из input[type="range"] сумма становиться больше 100, то надо уменьшать значение следующего из input[type="range"]. *Если это последний из input[type="range"], то уменьшать значение первого.
Необходимо округлять значения input[type="range"] до целого числа.
Необходимо отображать текущее значения input[type="range"] в

Для проверки 1)Если первый и второй компонент заполнены на 30% (в сумме 60%), то третий компонент не может быть больше 40%, если 4-й равен 0% 2)Если первые три компонента заполнены по 30% (в сумме 90%), то четвёртый компонент автоматически становится 10%.

javascript input

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Если я правильно понял всю логику, то предложу следующее решение:

form.addEventListener('input', fCalc);
let inputs = [...form.querySelectorAll('.range')];

function fCalc(ev) {
  let index = inputs.indexOf(ev.target);
  let order = [].concat(inputs.slice(index), inputs.slice(0, index));
  let diff = 100 - order[2].value - order[3].value - order[0].value;
  if (diff > 0) {
    order[1].value = diff;
  } else {
    order[1].value = 0;
    diff = 100 - order[3].value - order[0].value;
    if (diff > 0) {
      order[2].value = diff;
    } else {
      order[2].value = 0;
      order[3].value = 100 - order[0].value;
    }
  }
  inputs.forEach((el) => {
    el.nextElementSibling.textContent = el.value;
  });
}

.label { display: block; }

<form id="form" class="form" name="constructor">
  <p class="form_constructor">Full value: <span class="form_constructor__value">100</span></p>
  <label class="label">
    <input class="range" type="range" value="10" step="1" min="0" max="100" name="soybean">
    <span class="range_value">10</span>
  </label>
  <label class="label">
    <input class="range" type="range" value="30" step="1" min="0" max="100" name="sesame">
    <span class="range_value">30</span>
  </label>
  <label class="label">
    <input class="range" type="range" value="30" step="1" min="0" max="100" name="wheat">
    <span class="range_value">30</span>
  </label>
  <label class="label">
    <input class="range" type="range" value="30" step="1" min="0" max="100" name="corn">
    <span class="range_value">30</span>
  </label>
</form>

Это решение "в лоб", и для другого (произвольного) количества ползунков код потребуется усложнить. Также такой подход имеет проблемы с производительностью - может кто предложит решение оптимальнее.

JS Калькулятор для input[type=&quot;range&quot;]

Ответы

JS Калькулятор для input[type="range"]