How to set the limit of 5 input ranges against specific count of max 100

user_2184959 0
Viewed 88

I have five different ranges called myRangeOne, myRangeTwo, myRangeThree... etc. I also have a variable with a count of 100. I am attempting to limit the max value of the five ranges based on the count variable. The consolidated chosen values of all five ranges should sum up to a max count of 100 only. For example if I choose rangeOne or any of the other ranges and change the value to 20 the count variable value should change to 80 and the rest of four ranges should only have access the limit of 80. And Next if I choose rangeThree to and say change value to 40 then the count variable value changes to 40 and rest of the three sliders left will change the range limit to 40 and so on...

this is what I have done so far







 $(document).ready(function () {
            var initialCount = 100;
            var countTracker = initialCount;
            $("#myRangeOne").on("change", function (e) {
                console.log("this.value", this.value)
                var tempCounter = countTracker - parseInt(this.value);
                console.log("Counter", tempCounter)
                // if(parseInt(this.value) <= countTracker){
                    $("#" + e.target.dataset.val).html(this.value + "%");
                    // countTracker = tempCounter;
                    $("#counter").html(tempCounter)
                    $("#myRangeTwo").attr("max", tempCounter);
                    $("#maxTwo").html(tempCounter);
                // }
            });
            $("#myRangeTwo").on("change", function (e) {
                if(parseInt(this.value) <= countTracker){
                    $("#" + e.target.dataset.val).html(this.value + "%");
                    $("#counter").html(countTracker - parseInt(this.value))
                    $("#myRangeThree").attr("max", countTracker - parseInt(this.value));
                    // countTracker = countTracker - parseInt(this.value)
                    $("#maxthree").html(countTracker - parseInt(this.value));
                }else{
                    return false;
                }
            });
            $("#myRangeThree").on("change", function (e) {
                if(parseInt(this.value) <= countTracker){
                    $("#" + e.target.dataset.val).html(this.value + "%");
                    $("#counter").html(countTracker - parseInt(this.value))
                     $("#myRangeFour").attr("max", countTracker - parseInt(this.value));
                    // countTracker = countTracker - parseInt(this.value)
                    $("#maxFour").html(countTracker - parseInt(this.value));
                }
            });
            // $(".slider").on("change", function (e) {
            //     if(parseInt(this.value) <= countTracker){
            //         $("#" + e.target.dataset.val).html(this.value + "%");
            //         if (e.target.dataset.id === "one") {
            //             $("#counter").html(countTracker - parseInt(this.value))
            //         }
            //     }
            // });
        });


<div>Counter: <span id="counter">100</span></div>
    <div class="slidecontainer">
        <p>One <span id="one">0</span></p>
       <span id="minOne">0</span><input type="range" min="1" max="100" value="1" step="1" class="slider" data-val="one" data-id="one" id="myRangeOne"> <span id="maxOne">100</span>
    </div>
    <div class="slidecontainer">
        <p>Two <span id="two">0</span></p>
        <span id="minTwo">0</span><input type="range" min="1" max="100" value="1" step="1" class="slider" data-val="two" data-id="two" id="myRangeTwo"><span id="maxTwo">100</span>
    </div>
    <div class="slidecontainer">
        <p>Three <span id="three">0</span></p>
        <span id="minThree">0</span><input type="range" min="1" max="100" value="1" step="1" class="slider" data-val="three" data-id="three" id="myRangeThree"><span id="maxThree">100</span>
    </div>
    <div class="slidecontainer">
        <p>Four <span id="four">0</span></p>
        <span id="minFour">0</span><input type="range" min="1" max="100" value="1" step="1" class="slider" data-val="four" data-id="four" id="myRangeFour"><span id="maxFour">100</span>
    </div>
    <div class="slidecontainer">
        <p>Five <span id="five">0</span></p>
        <span id="minFive">0</span><span id="minOne"></span><input type="range" min="1" max="100" value="1" step="1" class="slider" data-val="five" data-id="five" id="myRangeFive"><span id="maxFive">100</span>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

I am not sure how to go about creating it. Any help in making this work is greatly appreciated.

html javascript
1 Answers

something like this?

const inputs = [...document.querySelectorAll(".slidecontainer input")];

for (let input of inputs) {
  input.addEventListener("input", update);
}

update();

function update(e) {
  // cap the value to max
  if (e && e.target.valueAsNumber > +e.target.dataset.max) {
    e.target.value = e.target.dataset.max;
  }

  let sumOfAllInputs = inputs.reduce((sum, input) => sum + input.valueAsNumber, 0);
  
  document.querySelector("#counter").textContent = 100 - sumOfAllInputs + "%";
  
  for (let input of inputs) {
    //const sumOfOtherInputs = sumOfAllInputs - input.valueAsNumber; 
    //const max = 100 - sumOfOtherInputs;
    // or short:
    const max = 100 + input.valueAsNumber - sumOfAllInputs;
    const container = input.closest(".slidecontainer");
    container.querySelector(".max").textContent = input.dataset.max = max;
    container.querySelector(".value").textContent = input.valueAsNumber + "%";
    
    // set the break-points for the background to visualize the range
    input.style.setProperty("--value", input.valueAsNumber + "%");
    input.style.setProperty("--max", max+"%");
  }
}
.slidecontainer input[type="range"] {
  -webkit-appearance: none;
  background: linear-gradient(to right, 
    #040 var(--value), 
    #0C0 0, 
    #0C0 var(--max),
    #FDD 0
  );
}

.slidecontainer input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1px;
  height: .8em;
}
<div>Counter: <span id="counter"></span></div>

<div class="slidecontainer">
  <p>One <span class="value">0%</span></p>
  <span class="min">0</span>
  <input type="range" class="slider" value="0" min="0" max="100">
  <span class="max">100%</span>
</div>

<div class="slidecontainer">
  <p>Two <span class="value">0%</span></p>
  <span class="min">0</span>
  <input type="range" class="slider" value="0" min="0" max="100">
  <span class="max">100%</span>
</div>

<div class="slidecontainer">
  <p>Three <span class="value">0%</span></p>
  <span class="min">0</span>
  <input type="range" class="slider" value="0" min="0" max="100">
  <span class="max">100%</span>
</div>

<div class="slidecontainer">
  <p>Four <span class="value">0%</span></p>
  <span class="min">0</span>
  <input type="range" class="slider" value="0" min="0" max="100">
  <span class="max">100%</span>
</div>

<div class="slidecontainer">
  <p>Five <span class="value">0%</span></p>
  <span class="min">0</span>
  <input type="range" class="slider" value="0" min="0" max="100">
  <span class="max">100%</span>
</div>

user_65672750
Related