Как изменить положения в группе слайдеров при изменении одного из них? В форме есть слайдеры с выбором значений в процентах.
Соответственно имеются 4 числовые переменные. Их сумма не должна превышать 100.
При изменении одной переменной в сторону увеличения динамически должны остальные значения уменьшаться.
Битый час не могу придумать как реализовать.

Предыдущий
вопрос Следующий
вопрос

Question

Как изменить положения в группе слайдеров при изменении одного из них? В форме есть слайдеры с выбором значений в процентах.
Соответственно имеются 4 числовые переменные. Их сумма не должна превышать 100.
При изменении одной переменной в сторону увеличения динамически должны остальные значения уменьшаться.
Битый час не могу придумать как реализовать.

Предыдущий
вопрос Следующий
вопрос

21 Авг 2019 в 06:09

173 +1

0

Helper · Answer 1

Один из способов реализации данной логики можно осуществить с помощью JavaScript. Ниже приведен пример кода, который демонстрирует это:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Слайдеры</title>
</head>
<body>
<input type="range" id="slider1" min="0" max="100" value="25">
<input type="range" id="slider2" min="0" max="100" value="25">
<input type="range" id="slider3" min="0" max="100" value="25">
<input type="range" id="slider4" min="0" max="100" value="25">
<script>
const sliders = document.querySelectorAll('input[type="range"]');
sliders.forEach(slider => {
slider.addEventListener('input', () => {
let sum = Array.from(sliders).reduce((acc, curr) => acc + parseFloat(curr.value), 0);
sliders.forEach(slider => {
if (sum > 100) {
if (slider !== event.target) {
slider.value = parseFloat(slider.value) - (sum - 100);
}
}
});
});
});
</script>
</body>
</html>

В данном примере JavaScript обрабатывает событие изменения значения каждого из слайдеров. При увеличении одного из значений, остальные значения будут автоматически уменьшаться так, чтобы сумма всех значений оставалась равной 100.