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

从另外四个滑块中的选定值更新第一个滑块中的滑块值时出现问题，但是slected不应大于50，这是第一个滑块中的最大值

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

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

以下是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>

CSS也在跟进

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

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

希望这有助于：

    <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函数进行了更改

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

    $('#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'));
    });