javascript - メインを変更しながら同じポイントから開始するBootstrap Slider

Question

私はブートストラップ スライダーを実装しており、それを処理するために TOP DOWN アプローチを使用しています。つまり、SUM スライダーを調整すると、その下の両方のスライダーに値が反映されます。また、下のスライダーに加えられた変更は、SUM スライダーにも影響します。

SUM スライダーをスライドさせているときを除いて、すべてが正常に機能しています。下の両方のスライダーが同じ値から開始しているため、再調整したくありませんが、現在の値の同じポイントから開始します。

それを修正する方法はありますか。

これがWorking Fiddleです。SUMスライダーをスライドしてみてください。下の両方のスライダーが同じポイントに来ますが、これは望ましくありません。SUM スライダーは、下の 2 つに均等に分配されますが、同じポイント、つまり同じ値からではありません。

.html

     <div class = "row">

    <div class = "col-md-12">
    <div class="wrapper4">
    <p style = "text-align:center">


    </div>

    <div class = "col-md-12">
    <div class = "col-md-4">

    <div class="wrapper">
    <hr />
    <p>
    SUM
    </p>

    <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80"  data-slider-step="0.2" style="text-align: center"/>
        <hr />
    <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="0.1" data-slider-orientation="vertical" />
    <input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="0.1" data-slider-orientation="vertical" />


    </div>
    </div>



    </div>
    </div>

.js

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

    $('#ex2').slider({
        value : 7.5,
        tooltip_position:'bottom',
         reversed : true,
      formatter: function(value) {
        return 'A: ' + value;
      }
    });

    $('#ex3').slider({
        value : 10,
        reversed : true,
      formatter: function(value) {
        return 'B: ' + value;
      }
    })

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


    // TOP DOWN APPROACH
    $("#ex1").on("slide", function() {
    $('#ex2,#ex3').slider('setValue', $('#ex1').slider('getValue')/2);
    });