Update the first slider on the basis of values in the next four sliders

Question

I have a problem updating the slider value in first one from the selected values in another four sliders, however slected should not be greater than 50 which is maximum value in the 1st slider.

Working Fiddle is here :

Here is the html code :

    <div class="wrapper">
    <div class= "col-md-12">
    <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" class = "col-md-8" data-slider-max="100"  data-slider-step="1" />
    <input type="text" class="form-control" id="inputValue" class = "col-md-4" style= "width:40px" value="0" />
    </div>
        <hr />
    <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="25" data-slider-step="1" data-slider-orientation="vertical" />
    <input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="25" data-slider-step="1" data-slider-orientation="vertical" />
    <input id="ex4" data-slider-id='ex4Slider' type="text" data-slider-min="0" data-slider-max="25" data-slider-step="1" data-slider-orientation="vertical" />
    <input id="ex5" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="25" data-slider-step="1" data-slider-orientation="vertical" />


    </div>
    </div>

and the javascript is following :

    var aa, bb, cc, dd, abcd ;
    var Slider1Change = function() {
       aa = a.getValue();
       bb = b.getValue();
       cc = c.getValue();
       dd = d.getValue();
       abcd = aa + bb + cc + dd;



    $('#ex1').on('slide', function(slider){

      return abcd;

    }); 


    };

    $('#ex1').slider({
        value : 25,
      formatter: function(value) {
        return 'ABCD: ' + value;
      }
    });

    $('#ex2').slider({
        value : 2,
         reversed : true,
      formatter: function(value) {
        return 'A: ' + value;
      }
    });


    $('#ex3').slider({
        value : 15,
        reversed : true,
      formatter: function(value) {
        return 'B: ' + value;
      }
    });


    $('#ex4').slider({
        value : 10,
         reversed : true,
      formatter: function(value) {
        return 'C: ' + value;
      }
    });


    $('#ex5').slider({
        value : 6,
         reversed : true,
      formatter: function(value) {
        return 'D: ' + value;
      }
    });

    var a = $('#ex2').slider()
        .on('slide', Slider1Change)
        .data('slider');
    var b = $('#ex3').slider()
        .on('slide', Slider1Change)
        .data('slider');
    var c = $('#ex4').slider()
        .on('slide', Slider1Change)
        .data('slider');
    var d = $('#ex5').slider()
        .on('slide', Slider1Change)
        .data('slider');

and the CSS is following

   .wrapper {
    padding : 10px;
    margin-top: 20px;
    margin-left:30px;
    }

    #ex2Slider, #ex3Slider, #ex4Slider{
      margin-right :20px;
    }

    #ex1Slider .slider-selection {
      background: #ff6666;
    }

    #ex1Slider .slider-handle {
      background: #ff6666;
    }
    #ex2Slider .slider-handle {
      background: #ff6666;
    }#ex3Slider .slider-handle {
      background: #ff6666;
    }
    #ex4Slider .slider-handle {
      background: #ff6666;
    }#ex5Slider .slider-handle {
      background: #ff6666;
    }

Answer 1

Hope this helps : http://jsfiddle.net/hawkeye15/qng5935v/13/

I have made changes in your javacript function

    $('#ex1').slider({
        value : 20,
      formatter: function(value) {
        return 'ABCD: ' + value;
      }
    });

    $('#ex2').slider({
        value : 2,
         reversed : true,
      formatter: function(value) {
        return 'A: ' + value;
      }
    });


    $('#ex3').slider({
        value : 15,
        reversed : true,
      formatter: function(value) {
        return 'B: ' + value;
      }
    });


    $('#ex4').slider({
        value : 10,
         reversed : true,
      formatter: function(value) {
        return 'C: ' + value;
      }
    });


    $('#ex5').slider({
        value : 6,
         reversed : true,
      formatter: function(value) {
        return 'D: ' + value;
      }
    });

    $("#ex2,#ex3,#ex4,#ex5").on("slide", function() {
        $('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue'));
    });