[Solved] How to solve input continuity matching [closed]

by 


<!-- Author: devninja67 -->
<!-- ***** -->
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
		// Returns all selector elements
		const getRanges = () => Array.from(document.querySelectorAll('.hrange'));

		// return value to change
		const minValue = (v1, v2) => {
			if(v1 < 0)  return Math.abs(v1) < v2 ? v1 : -v2;
			else return v1 < 100 - v2 ? v1 : 100 - v2;
		}

		// Gets us an ability to sum selectors (can exclude a selector if required)
		const sumSelectors = (exclude) => getRanges()
		    .filter((r) => (exclude) ? r !== exclude : true)
		    .map(r => parseInt(r.value))
		    .reduce((a, s) => a + s);
		
		// changing before or after slider
		const checkRanges = (idx) => {
		// after element for increasing and before element for decreasing
	   	let stride = (sumSelectors() > 100) ? 1 : -1;
	    let selectorId = idx;
		// changing slider's value until sliders's sum equal 100
	    while(true) {
	     	selectorId = (selectorId + stride + 4) % 4;
	     	let selector = document.querySelector("#range" + selectorId);
	    	let selectorValue = parseInt(selector.value);
	    	selector.value = selectorValue + minValue(100 - sumSelectors(), selectorValue);
	    	if(sumSelectors() !== 100) continue;
	    	else break;
			}
		  document.querySelector('#amount').value = sumSelectors();
		};

		// Listening inputing slider
		document.addEventListener('DOMContentLoaded', function() {
		  getRanges().forEach((r, idx) => {
		    r.addEventListener('input', (event) => {
		      checkRanges(idx);
		    });
		  });
		});
	</script>

	<style type="text/css">
		.hrange {
  		display: block;
		}
	</style>
</head>
<body>
	<div class="hThree">
	  <input type="range" id="range0" orient="vertical" value="25" class="hrange" min="0" max="100" />
	  <input type="range" id="range1" orient="vertical" value="25" class="hrange" min="0" max="100" />
	  <input type="range" id="range2" orient="vertical" value="25" class="hrange" min="0" max="100" />
	  <input type="range" id="range3" orient="vertical" value="25" class="hrange" min="0" max="100" />
	  <input id="amount" type="number" value="100" min="0" max="100" />
	</div>
</body>
</html>

1

solved How to solve input continuity matching [closed]