Combined total for multiple jQuery-UI Sliders

Question

I\'m trying to implement a page where there are 4 jQuery-UI sliders, and I want to make it so the combined total of all 4 sliders will never go over 400.

I don\'t mi

Answer 1

It was a good experience for me.I hope it will also helpful for others.

$(document).ready(function(){
    var sliders = $(".slider");
    var available = 100;
    sliders.slider({
      value: 0,
      min: 0,
      max: available,
      range: "max",
      step: 1,
      animate: 0,
      slide: function(event, ui){
        var total = 0;
        var arr = new Array();
        sliders.not(this).each(function() {
          var t = $(this);
          arr.push(t);
          total += t.slider("option", "value");
        });
        total += ui.value;							
        var delta = available - total;
        if(delta<0){
          return false;
        }
        $(this).parent('.slidecontainer').find('.setval').text(ui.value);
        $.each(arr, function(idx, ele){
          let v = ele.slider("option", "value");
          let vm = v + delta;
          $(ele).parent('.slidecontainer').find('.max').text(vm);
        });
      }
    });                    
  });

  

    

    
Value: 
    Max: 
    
  
	

  

    

    
Value: 
    Max: