мы будем использовать обычный JS, чтобы сделать эту работу. Первое, что вы хотите добавить - это атрибут onchange для ваших ползунков, чтобы он вызывал данную функцию, которая будет обновлять другие ползунки. Мы должны дать этой функции индекс слайдера, который мы только что изменили. Давайте дадим индексам ползунков от 0 до 3. Укажите им идентификатор, чтобы мы могли изменить их в скрипте JS. Давайте назовем функцию change().
Итак, давайте напишем функцию сейчас. Что мы хотим сделать, это изменить значение других ползунков. Начальная сумма равна единице, поэтому давайте сохраним это значение навсегда. Нам нужно сохранить значения в массиве, чтобы мы могли увидеть, что это за изменение. Поэтому, когда ползунок был изменен, вычислите дельту между новым значением и старым. Как только вы узнаете, как изменение повлияло на общую сумму, давайте изменим другие ползунки благодаря только что вычисленной дельте. Поскольку есть 3 ползунка, которые мы можем изменить, добавьте их третью дельту к каждому ползунку. Таким образом, изменение, внесенное на одном слайдере, будет «отменено» в общей сумме, поэтому мы сохраняем исходное значение, равное 1.
Вот как теперь должен выглядеть ваш код:
let values = [1, 0, 0, 0]; // The initial values
/* The onchange attribute will trigger this function */
function change(x) {
let newValue = document.getElementById(String(x)).value * 1; // Find the new value
let oldValue = values[x]; // Search for the old value
values[x] = newValue; // Update in the array the new value
let deltaValue = oldValue - newValue; // Calculate the difference between the old value and the new one
/* Now, loop through all the buttons to update them */
for(let i = 0; i < 4; i++) {
if(i === x) continue; // If it's the same, so do not change a thing
/* This is the new value we want to put in
* We want to equilibrate the whole system
* Means we have to update the 3 other sliders
* So just add to each one of them the third of the difference created by the one changed
*/
let newVal = document.getElementById(String(i)).value * 1 + deltaValue / 3; // * 1 is to convert the value into an number, we do not want a String
document.getElementById(String(i)).value = newVal; // Put the new value in
values[i] += deltaValue / 3; // And update that value in the array
}
}
<label>Slider 1
<input onchange="change(0)" id="0" max="1.0" min="-1.0" step="0.05" type="range" value="1.0">
</label>
<label>Slider 2
<input onchange="change(1)" id="1" max="1.0" min="-1.0" step="0.05" type="range" value="0.0">
</label>
<label>Slider 3
<input onchange="change(2)" id="2" max="1.0" min="-1.0" step="0.05" type="range" value="0.0">
</label>
<label>Slider 4
<input onchange="change(3)" id="3" max="1.0" min="-1.0" step="0.05" type="range" value="0.0">
</label>
Я почти уверен, что можно провести много оптимизаций, но, поскольку я не являюсь JS экспертом, он это сделает!
Надеюсь, это помогло вам.