1)  <input type="range" min="0" step="10" max="100" value="10" class="prod_range_on_main range1">
<div class="range_text"></div>
 
 2) <input type="range" min="0" step="10" max="100" value="90" class="prod_range_on_main range2">
<div class="range_text"></div>
 
 3) <input type="range" min="0" step="10" max="100" value="0" class="prod_range_on_main range3">
<div class="range_text"></div>
 

4)  <input type="range" min="0" step="10" max="100" value="0" class="prod_range_on_main1 range4">
<div class="range_text"></div>
 






<div class="total">all_val: <span></span></div>

.prod_range_on_main {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin:25px 0;

}

.prod_range_on_main:hover {
  opacity: 1;
}

.prod_range_on_main::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
  transition:all .3s;
    border-radius:50%;
}

.prod_range_on_main::-moz-range-thumb {
  width: 25px;
  height: 2px;
  background: #4CAF50;
  cursor: pointer;
    border-radius:50%;
}

 

$(".prod_range_on_main").on("input", function(){
    let all_val=0;
   $(this).next().text($(this).val())
  $(".prod_range_on_main").each(function(){
 all_val+=Number($(this).val());    
  })
 
    if(all_val>=100){
    console.log("more")
     $(".range4").val(0)
    }else{
      console.log("less")      
      $(".range4").val(100-all_val)
      $(".range4").next().text($(".range4").val())
    }

 
  $(".total span").text(all_val)
})