JSFiddle - React, Tailwind, and code Playground

by Annie Lagang

HTML

<input type="range" class="depend" min="0" max="100" value="70" step="5" id="one">
<label id="one_value">70</label>%<br>
<input type="range" class="depend" min="0" max="100" value="30" step="5" id="two">
<label id="two_value">30</label>%<br>
<input type="range" class="depend" min="0" max="100" value="0" step="5" id="three">
<label id="three_value">0</label>%<br>

JavaScript

var depends = document.querySelectorAll('.depend');

[].forEach.call(depends, function(depend) {
  depend.onchange = function() {
    s(this, this.value);
    c(this);
  }
});
    
function c(current) {
	var input = +current.value;
	var max = 100;
	var delta = max - input;
  var sum = 0;
  var partial = 0;
  var siblings = [];

			// Sum of all siblings
  [].forEach.call(depends, function (depend) {
    if (current != depend) {
      siblings.push(depend); // Register as sibling
      sum += +depend.value;
    }
  });

  // Update all the siblings
  siblings.forEach(function (subling, i) {
  
    var val = +subling.value;
    var fraction = 0;

    // Calculate fraction
    if (sum <= 0) {
      fraction = 1 / (depends.length - 1)
    } else {
      fraction = val / sum;
    }

    // The last element will correct rounding errors
    if (i >= depends.length - 1) {
      val = max - partial;
    } else {
      val = Math.round(delta * fraction);
      partial += val;
    }
    
    s(subling, val);
	});
}		

function s(el, value) {
  var label = document.getElementById(el.id+'_value')
  label.innerHTML = value;
  el.value = value;
}