Question

我在使用另外四个滑块中的选定值更新第一个滑块值时遇到问题，但是当选时不应大于50，这是第一个滑块中的最大值。

这是html代码：

LastUpdate

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

，CSS正在关注

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

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

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

1 个答案: