Fader Group

how to sync multiple range sliders?

by trentHarlem

HTML

<input class='fader' type='range' id='one' value='' 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='' 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>

CSS

body {
  font: 1.3rem system-ui;
  background-color: #ccc;
}

input.fader {
  width: 50%;
}

.level {
  font-size: 0.75rem;
  color: #222;
}

JavaScript

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 = false
console.log(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);
  //console.log('show output', 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


function gang() {
  let oneValue = faderOne.value,
    twoValue = faderTwo.value;
  let groupFader = document.getElementById("grouped");


  if (locked !== false) {
    output4.innerText = 'Group Fader is active.'
    let groupValue = groupFader.value
    output3.innerHTML = groupValue;
    console.log('gang', oneValue, twoValue)


    // Store previous value so we can calculate change
    groupFader.prevValue = groupFader.valueAsNumber;
    groupFader.oninput = (e) => {
      // Calculate the change
      let delta = groupFader.valueAsNumber -...