Как ограничить сумму нескольких input[type="range"]?

Question

[ZHeka]

Нужно сделать компонент из слайдеров, содержащий несколько слайдеров, сумма значений которых должна быть ограничена:


То есть, когда у меня допустим два слайдера равны по 50%, то остальные двигать нельзя.
Если один из слайдеров я передвинул на 40%, то первый я могу сдвинуть до 60%, или остальные два сдвинуть на 5% каждый, или один на 10 или как-то по другому, но суммарно на 10.

И вот вопрос. Как мне иметь слайдеры (input type =''range') с равным диапазоном мин и макс, но ещё как-то сделать некое свойство limit, которое можно будет по условию применять и ограничивать движение слайдера?

Answer 1

[0xD34F]

Компонент получает через props массив текущих значений и максимально допустимую сумму. Когда пользователь пытается изменить какое-либо из значений, собирается новый массив значений, считается его сумма. Если сумма не превышает максимально допустимую - новый массив значений отдаётся в родительский компонент.

function Ranges(props) {
  const onChange = ({ target: t }) => {
    const index = +t.dataset.index;
    const value = +t.value;
    const values = props.values.map((n, i) => i === index ? value : n);

    if (props.max >= values.reduce((acc, n) => acc + n, 0)) {
      props.onChange(values);
    }
  };

  return (
    <div>
      {props.values.map((n, i) => (
        <div>
          <input
            type="range"
            data-index={i}
            max={props.max}
            value={n}
            onChange={onChange}
          />
          {n}
        </div>
      ))}
    </div>
  );
}

https://jsfiddle.net/cx16nhqe/

Comments

[ZHeka]

Большое спасибо! Буду вникать. Супер!

Answer 2

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

Если разобраться, то можно понять.

Функцию балансировки можно свою, которая будет блокировать изменения по требуемым условиям.

Comments

[ZHeka]

Сергей, большое спасибо! Единственное, вот мне нужно чтобы автоматом не балансировалось, а лишь была возможность это сделать. Иначе ну прям очень стремно получается для пользователя. Тут подвинул, там свдинулось, и короче отбалансировать как хочется оч сложно.
получается функцию балансировки мне переделать нужно. а как блокировать изменение? дизейблить?

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

ZHeka, сохранять предыдущее значение в массиве. В моём варианте происходит обыкновенное пропорциональное распределение с предварительной записью из слайдера в "состояние" прямо в обработчике.
В логике балансировки может оказаться очень много взаимоисключающих условий, которые ещё предстоит выявить.

[ZHeka]

Да, конечно поразбираться придется) еще вот заметил, что если один выкрутить на макс, то получается чет не совсем тру..

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

ZHeka, так работает пропорциональное распределение, с асимптотическим уменьшением отношения элемента к сумме. Тем более, ни одного обнуления или вычитания нет, как ноль получать?
А ещё процедура переназначения пропускает "активный" слайдер, так что он не соответствует своему значению из "состояния". И проверки деления на ноль нет.

[ZHeka]

Сергей Сергей, честно, тяжко вникается) Если у вас будет возможность, могли бы сегодня-завтра попробовать реализовать под ту логику, что описал. Чтобы была возможность двигать остальные.

Я на реакте буду делать, но если вам ближе js, думаю проблем перевести из js в react у меня не будет, поэтому как вам удобнее. Конечно, если удобно!