Fader Group

how?

by trentHarlem

HTML

<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>

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'),
  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)
})

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


function gang() {
  let groupValue
  if (locked !== true) {
    document.getElementById('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 = '127'
  } else if (locked === true) {
    //console.log('gang faders')

    //release Group Fader value
    groupValue = groupFader.value;
    output3.innerHTML = groupValue;
    document.getElementById('output4').innerText = 'Group Fader is active.'
    //variable for current FaderOne Value
    //variable for current FaderTwo Value
    //variable for current Group Fader Value
    
    //variable for 'previous' Group Fader Value --- is new value higher or...