javascript - 使用 Bootstrap Slider 一个 Slider 结果是另外两个 Slider 的总和

Question

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

Here is the Working Fiddle

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 仅包含当前正在滑动的 slider 的值，而不是两者的总和。

此外，也许您希望为 slider 2 和 3 设置 min 和 max 值，而不是 1 和 2(如果您使用 1 作为 slider ) 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/