javascript - Bootstrap Slider を使用すると、1 つの Slider が別の 2 つの Slider の合計になります

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>

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