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

Question

我在更新第四个滑块中选定值的滑块值时遇到问题，但所选值不应大于最大值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; 
    } 

Answer 1

希望这有助于： http://jsfiddle.net/hawkeye15/qng5935v/13/

我已经在你的javacript功能所做的更改

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