How to have three HTML sliders, indicating percentage; when one slider moved, other sliders are moved proportionally so the total of sliders = 100% [closed]

I'm working in HTML and JavaScript. I have 3 sliders that each have their own percentage values (from 0 to 100), but the sum of the 3 values must be 100. When the user increases one slider, the other two sliders must decrease proportionally to match the sum of 100.

Here's an example: Slider 1's value is 60, slider 2's value is 30, and slider 3's value is 10. The user then moves slider 3 from 10 to 73. This means that the values of the other two sliders must instantly decrease so that the sum of the values can still be 100. However, the values of those two sliders must maintain the same proportion of 60:30 (2:1). Therefore, slider 1 goes to 18 and slider 2 goes to 9.

If a decimal value occurs, the decimal value should be stored in a variable, but the actual text that appears on-screen should be rounded down to the nearest integer. It's okay if the text values do not sum to 100, but the stored decimal values should add up to 100. When the user first opens the page, all of the slider values are set to 33.3, but the text on the right of each slider says 33%.

Here is the HTML code I have so far:

<div class="container-flex"> <h2 style="margin-right: 15px">True/False</h2> <input type="range" min="0" max="100" value="33.3" class="slider" id="trueFalseSlider"> <p><span id="trueFalseSliderValue"></span>%</p> </div> <div class="container-flex"> <h2 style="margin-right: 15px">Multiple Choice</h2> <input type="range" min="0" max="100" value="33.3" class="slider" id="multipleChoiceSlider"> <p><span id="multipleChoiceSliderValue"></span>%</p> </div> <div class="container-flex"> <h2 style="margin-right: 15px">Written</h2> <input type="range" min="0" max="100" value="33.3" class="slider" id="writtenSlider"> <p><span id="writtenSliderValue"></span>%</p> </div>

And here is the JavaScript:

var trueFalseSlider = document.getElementById("trueFalseSlider"); //Slider var trueFalseOutput = document.getElementById("trueFalseSliderValue"); //Text under the slider var multipleChoiceSlider = document.getElementById("multipleChoiceSlider"); //Slider var multipleChoiceOutput = document.getElementById("multipleChoiceSliderValue"); //Text under the slider var writtenSlider = document.getElementById("writtenSlider"); //Slider var writtenOutput = document.getElementById("writtenSliderValue"); //Text under the slider trueFalseOutput.innerHTML = trueFalseSlider.value; //Displays the true/false slider's value when you first open the page. multipleChoiceOutput.innerHTML = multipleChoiceSlider.value; //Displays the multiple choice slider's value when you first open the page. writtenOutput.innerHTML = writtenSlider.value; //Displays the written slider's value when you first open the page. trueFalseSlider.value = 33.3; multipleChoiceSlider.value = 33.3; writtenSlider.value = 33.3; //This function updates the current slider value each time you drag it. trueFalseSlider.oninput = function() { trueFalseOutput.innerHTML = this.value; } multipleChoiceSlider.oninput = function() { multipleChoiceOutput.innerHTML = this.value; } writtenSlider.oninput = function() { writtenOutput.innerHTML = this.value; }

Since I'm a beginner, I don't really know how to get this implemented. How can this code be modified to get it working?