javascript - 根据接下来的四个滑块中的值更新第一个滑块

我在从其他四个滑块中选择的值中更新第一个滑块中的值时遇到问题，但是选择的值不应大于50，这是第一个滑块中的最大值。

Working Fiddle is here :

这是html代码：
                    

    <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>

和JavaScript如下：

    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');

和CSS跟随

   .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;
    }

最佳答案

希望这可以帮助 ：
http://jsfiddle.net/hawkeye15/qng5935v/13/
我对您的javascript函数进行了更改