javascript - 一个 Slider 使用 Bootstrap Slider 产生另外两个 Slider 的总和

Question

我正在尝试使用 Slider2 和 Slider3 的总和来更新 Slider1 的值，但它只显示 Slider1 或 Slider2 的值，以移动为准。我在更新 Slider1 的值时犯了一些错误。

这是工作小提琴

代码.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>

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

代码.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/