0

Подскажите как можно реализовать на JavaScript изменение общего значения для нескольких бегунков?

Есть форма, где несколько бегунков. На 4 бегунка выделено 100, назовем их, поинтов. Когда один передвигаешь, общее значение уменьшается, передвигаешь еще один - еще уменьшается. Бегунки не могут выходить за пределы этого значения.

Не силен в JS от слова совсем. Вот, что удалось накидать. Дальше тупик.

function testMy() {
  line = document.getElementByType("active").value;
  my = document.getElementById("count");
  my.innerHTML = line.value;
}
body {
  display: grid;
  width: 200px;
}
<form>
  <input type="range" min=0 max=100 id='active' value="0" oninput="testMy()">
  <div id="count">0</div>
  <input type="range" min=0 max=100 id='ritual' value="0" oninput="testMy()">
  <div id="count2">0</div>
  <input type="range" min=0 max=100 id='games' value="0" oninput="testMy()">
  <div id="count3">0</div>
  <input type="range" min=0 max=100 id='learn' value="0" oninput="testMy()">
  <div id="count4">0</div>

  <div id="count-max">100</div>
  <input type="submit" value="Сохранить">
</form>

1 ответ 1

3

let points = 100,
    values = [],
    pointsRange = document.getElementById("pointsRange"),
    pointsElement = pointsRange.querySelector("#points"),
    ranges = pointsRange.querySelectorAll('input[type="range"]'),

rangeHandler = function() {

  let id = this.dataset.id,
      value = this.valueAsNumber,
      difference = value - values[id];
      
  values[id] = value;
  
  points -= difference;
  
  if (points < 0) {
    this.value = values[id] += points;
    points = 0;
  }

  [].forEach.call(ranges, range => range.max = points + range.valueAsNumber)

  this.nextElementSibling.innerText = values[id];

  pointsElement.innerText = points;
  
};

[].forEach.call(ranges, (range, id) => {

  range.dataset.id = id;
  
  values.push(range.valueAsNumber);

  range.addEventListener("input", rangeHandler);
  
  rangeHandler.call(range)

});
body {
  display: grid;
  width: 200px;
}
<form id="pointsRange">

  <label>
	  <input type="range" min="0" max="100" value="0">
	  <div></div>
  </label>

  <label>
	  <input type="range" min="0" max="100" value="0">
	  <div></div>
  </label>

  <label>
	  <input type="range" min="0" max="100" value="0">
	  <div></div>
  </label>

  <label>
	  <input type="range" min="0" max="100" value="0">
	  <div></div>
  </label>

  <div id="points"></div>

  <input type="submit" value="Сохранить">

</form>

1
  • @КириллКулаков добавил живности ползункам. но учтите, что перебор в подобных функциях, что часто вызываются, может отразиться на производительности.
    – webDev_
    Commented 9 февр. 2019 в 23:38

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.