title: is there a javascript method for telling us if a input range slider value is going up vs down?
body: <p>I'm trying to group input range sliders or 'faders' together so that one 'Group Fader' can control two or more faders while keeping their respective relative values intact.
  So if fader One has a value of '50' and fader Two has a value of '75' When we group them together and increase the Group Fader by +20, faders one and two will move simultaneously and have their new new respective values 70 and 95.</p>
  <p>I'm playing a shell game with variables and losing.. this is beyond my 'scope'=) hoping there's an easier way. Go easy on me this is my first question.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &gt; 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 &lt; 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)
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font: 1.3rem system-ui;
    background-color: #ccc;
  }
  
  input.fader {
    width: 50%;
  }
  
  .level {
    font-size: 0.75rem;
    color: #222;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input class='fader' type='range' id='one' value='64' min='0' max='127'&gt;
  
  &lt;span id='output1' class='level'&gt;&lt;/span&gt;&lt;label for='one'&gt; Fader One&lt;/label&gt;
  
  &lt;br&gt;
  &lt;input class='fader' type='range' id='two' value='64' min='0' max='127'&gt;
  
  &lt;span id='output2' class='level'&gt;&lt;/span&gt;&lt;label for='two'&gt; Fader Two&lt;/label&gt;
  
  &lt;br&gt;
  &lt;input type="checkbox" id="grouped-btn" name="grouped" value="false"&gt;
  
  &lt;label for="grouped-btn"&gt; group enable/disable &lt;/label&gt;
  
  &lt;br&gt;
  &lt;input class='fader' type='range' id='grouped' value='0' min='-127' max='127'&gt;
  
  &lt;span id='output3' class='level'&gt;&lt;/span&gt;&lt;label for='grouped'&gt;Group Fader&lt;/label&gt;&lt;br&gt;
  
  &lt;span id='output4' class='level'&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>