JSFiddle - React, Tailwind, and code Playground

by Diana Lemen

HTML

<input type="range" min="0" max="100" step="5" value="25" id="prob_2" class="block">
<input type="range" min="0" max="100" step="5" value="25" id="prob_3" class="block">
<input type="range" min="0" max="100" step="5" value="25" id="prob_4" class="block">
<input type="range" min="0" max="100" step="5" value="25" id="prob_5" class="block">

CSS

.block {
  display: block;
}

JavaScript

const prob_2 = document.getElementById("prob_2");
const prob_3 = document.getElementById("prob_3");
const prob_4 = document.getElementById("prob_4");
const prob_5 = document.getElementById("prob_5");

const getActualProbValue = (value) =>  value / 100;

const probValues = {
	prob_2: 25,
  prob_3: 25,
  prob_4: 25,
  prob_5: 25
};

const min = 0;
const max = 100;

const onRangeChange = (prob, value) => {
	const prevProbVal = probValues[prob];
  const diff = prevProbVal - Number(value);
  let change;
  let actualDiff;
  let notNull;
	let not100;
  
  change = Object.keys(probValues);
  
  if (diff < 0) {
  	notNull = Object.keys(probValues).filter(pr => probValues[pr] !== 0);
    not100 = Object.keys(probValues).filter(pr => probValues[pr] !== 100);
    if (notNull && not100) {
    	change = [...notNull, ...not100];
    }
  } 
  
  if (diff < 0) {
  	test = Object.keys(probValues).filter(pr => probValues[pr] !== 100);

		if (test.length) {
			change = test;
		}
  }
  
  let den = change.length;
  
  if (!not100) {
  	den = 1;
  }

	probValues[prob] = Number(value);
  
  const getAtherProbValues = (key) => {
  	if (!diff) {
    	return probValues[key];
    }
   console.log(diff,den);
   const current = probValues[key] + Math.round(diff/den);
    
    if (current < 0) return 0;
    if (current > 100) return 100;
    
    return current;
  }

  change.forEach((key) => {
    	probValues[key] = getAtherProbValues(key);
   })
   
   console.log(probValues);
   
  prob_2.value = probValues.prob_2;
  prob_3.value = probValues.prob_3;
  prob_4.value = probValues.prob_4;
  prob_5.value = probValues.prob_5;
  
}


prob_2.oninput = () => onRangeChange('prob_2', prob_2.value);

prob_3.oninput = () => onRangeChange('prob_3', prob_3.value);

prob_4.oninput = () => onRangeChange('prob_4', prob_4.value);

prob_5.oninput = () => onRangeChange('prob_5', prob_5.value);