是否有一个javascript方法告诉我们，如果一个输入范围滑块值是上升还是下降?

Question

我试图将输入范围滑块或'滑动器'分组在一起，以便一个'组滑动器'可以控制两个或多个滑动器，同时保持各自的相对值完整。因此，如果fader 1的值为"50"，fader 2的值为"75"，当我们将它们组合在一起并将fader group增加20时，fader 1和fader 2将同时移动，并且各自的新值为70和95。

我在玩一个有变量的shell游戏，输了…这超出了我的'范围'=)希望有一个更简单的方法。这是我的第一个问题。

const faderOne = document.getElementById('one'),
faderTwo = document.getElementById('two'),
groupFader = document.getElementById('grouped'),
output1 = document.getElementById('output1'),
output2 = document.getElementById('output2'),
output3 = document.getElementById('output3'),
output4 = document.getElementById('output4'),
groupBtn = document.getElementById('grouped-btn')
let locked
faderOne.addEventListener('input', showOutput)
faderTwo.addEventListener('input', showOutput)
groupFader.addEventListener('input', gang)
groupBtn.addEventListener('click', function toggleGrouped() {
locked = locked ? false : true;
console.log('grouped = ', locked)
let groupValue = '0';
output3.innerHTML = groupValue;

})
function showOutput() {
let oneValue = faderOne.value,
twoValue = faderTwo.value,
groupValue = groupFader.value;
output1.innerHTML = oneValue;
output2.innerHTML = twoValue;
output3.innerHTML = groupValue;
//console.log(oneValue, twoValue);
}
showOutput();
// if the group feature is 'enabled' (checkbox checked)
//then the Group Fader would control both Fader One and Fader Two respectively. Keeping their relative values intact during any movements the group faders makes up or down
// some way to disable the group fader function and return to the original ungrouped state. or separate function
//let groupLast = groupFader.value;
let groupLast = 0

function gang() {
let groupValue = '0'
let groupUp = groupValue
let groupDown = groupValue
let groupNew = groupFader.value
if (locked !== true) {
output4.innerText = 'You must enable group to use the Group Fader.'
// Lock? GROUP FADER value at 127 (0-255) to accommodate potential values up and down
// or hide display of GROUP FADER until checkbox 'enabled'.?
groupValue = '0'
} else if (locked === true) {
//console.log('gang faders')
//release Group Fader value
groupValue = groupFader.value;
output3.innerHTML = groupValue;
output4.innerText = 'Group Fader is active.'
//variable for 'previous' Group Fader Value --- is new value higher or lower?
console.log('group', groupValue)
console.log('groupLast', groupLast)
if (groupNew > groupLast) {
//console.log(control)
//REPLACE stepUp!
document.getElementById("one").stepUp(1);
document.getElementById("two").stepUp(1);
groupUp = groupFader.value
groupNew = groupUp
console.log('groupUp', groupUp)
output1.innerHTML = one.value
output2.innerHTML = two.value
} else if (groupNew < groupLast) {
groupDown = groupFader.value
//REPLACE stepDown!
console.log('groupDown', groupDown)
groupNew = groupDown
document.getElementById("one").stepDown(1);
document.getElementById("two").stepDown(1);
} else if (locked !== true) {
document.getElementById('output4').innerText = 'You must enable group to use the Group Fader.'
groupValue = '0'
return;
}
groupLast = groupNew
console.log('new', groupNew)
}
}

body {
font: 1.3rem system-ui;
background-color: #ccc;
}
input.fader {
width: 50%;
}
.level {
font-size: 0.75rem;
color: #222;
}

<input class='fader' type='range' id='one' value='64' min='0' max='127'>
<span id='output1' class='level'></span><label for='one'> Fader One</label>
<br>
<input class='fader' type='range' id='two' value='64' min='0' max='127'>
<span id='output2' class='level'></span><label for='two'> Fader Two</label>
<br>
<input type="checkbox" id="grouped-btn" name="grouped" value="false">
<label for="grouped-btn"> group enable/disable </label>
<br>
<input class='fader' type='range' id='grouped' value='0' min='-127' max='127'>
<span id='output3' class='level'></span><label for='grouped'>Group Fader</label><br>
<span id='output4' class='level'></span>

Answer 1

我将只存储前一个值，并使用它来计算需要改变多少其他值。这样做的好处是，当用户滑动控件并单击滑动条时，它也可以工作。

let control = document.getElementById("range3");
// Store previous value so we can calculate change
control.prevValue = control.valueAsNumber;
control.oninput = (e) => {
// Calculate the change
let delta = control.valueAsNumber - control.prevValue;
control.prevValue = control.valueAsNumber;
// Update other sliders
document.getElementById("range1").valueAsNumber += delta;
document.getElementById("range2").valueAsNumber += delta;
}

<div><input type="range" min="1" max="100" value="50" id="range1"></div>
<div><input type="range" min="1" max="100" value="50" id="range2"></div>
<div><input type="range" min="1" max="100" value="50" id="range3"></div>