Question

我试图用Slider2和Slider3的总和更新Slider1的值，但它只显示Slider1或Slider2的值，无论哪个移动。我在更新Slider1的值时犯了一些错误。

code.html

    <div class="wrapper">
    <p>
    Slider1
    </p>
    <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="50" data-slider-step="1" />
        <hr />
        <p>
    Slider2
    </p>
        <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" />
        <hr />
        <p>
    Slider3
    </p>
        <input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" />
        <hr />

    </div>

Javscript.js

    var minSliderValue1 = $("#ex1").data("slider-min");
    var maxSliderValue1 = $("#ex1").data("slider-max");
    var minSliderValue2 = $("#ex2").data("slider-min");
    var maxSliderValue2 = $("#ex2").data("slider-max");

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

    $('#ex2').slider({
        value : 0,
      formatter: function(value) {
        return 'Current value: ' + value;
      }
    });

    $('#ex3').slider({
        value : 0,
    });

    // If You want to change input text using slider handler
    $('#ex1').on('slide', function(slider){
      $("#ex3,#ex2").val(slider.value);
    });

    // If you want to change slider using input text
    $("#ex3,#ex2").on("slide", function() {
        var val = Math.abs(parseInt(this.value, 10) || (minSliderValue1+minSliderValue2));
        this.value = val > (maxSliderValue1+maxSliderValue2) ? (maxSliderValue1+maxSliderValue2) : val;
        $('#ex1').slider('setValue', val);
    });

code.css

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

Answer 1

您的问题来自$('#ex1').slider('setValue', val);。 val仅包含当前滑动的滑块的值，而不是两者的总和。

此外，您可能希望为滑块2和3设置min和max值，而不是1和2（如果您使用1作为2的总和和3）。

更新以包含代码调整

slide事件监听器所需要的只是：

$('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue'));

所以更新后的功能是：

// If you want to change slider using input text
$("#ex3,#ex2").on("slide", function() {
    $('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue'));
});

http://jsfiddle.net/qng5935v/12/

一个滑块使用Bootstrap Slider得到另外两个滑块的总和

1 个答案: