Javascript 引导滑块从同一点开始，同时更改主

我正在实现引导滑块，并使用自上而下的方法来处理它，即当调整总和滑块时，值将传播到它下面的两个滑块。同时，对底部滑块所做的更改也会影响总和滑块

一切正常，除了滑动总和滑块时，下面两个滑块都从相同的值开始，我不想重新调整，而是从其当前值的相同点开始

有没有办法解决这个问题

这里是。尝试滑动总和滑块，下面两个滑块将到达我不想要的同一点。求和滑块应均匀分布在下面两个点之间，但不能从同一点（即相同的值）开始

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

---

您可以在回调函数中为

$ex1

上的

幻灯片事件反向添加，并跟踪
$ex2
和
$ex3
的值。我已将第二个参数设置为
setValue
为false。根据文档，这应确保不会触发这些滑块上的
slide
事件。这就是为什么我在
$ex1
的
幻灯片上更新
ex2Val
和
ex3Val

希望这是有道理的。只要看一下片段，你就会明白了

)()


var$ex1=$（'#ex1'）；
变量$ex2=$（'#ex2'）；
变量$ex3=$（“#ex3”）；
var ex2Val=7.5；
var ex3Val=10.5；
$ex1.0({
值：ex2Val+ex3Val，
格式化程序：函数（值）{
返回'AB:'+值；
}
});
$ex2.0({
值：ex2Val，
工具提示位置：'bottom'，
对,，
格式化程序：函数（值）{
返回'A:'+值；
}
});
$ex3.0({
值：ex3Val，
对,，
格式化程序：函数（值）{
返回'B:'+值；
}
})
//如果要更改主滑块
$ex2.on（“幻灯片”，功能（evt）{
ex2Val=evt.value；
$ex1.滑块（'setValue'，（ex2Val+ex3Val））；
});
$ex3.on（“幻灯片”，功能（evt）{
ex3Val=evt.value；
$ex1.滑块（'setValue'，（ex2Val+ex3Val））；
});
//自上而下的方法
$ex1.on（“幻灯片”，功能（evt）{
$ex2.滑块（'setValue'，evt.value-ex3Val，false）；
$ex3.slider（'setValue'，evt.value-ex2Val，false）；
});
$ex1.on（“幻灯片”，函数（evt）{
ex2Val=$ex2.slider（'getValue'）；
ex3Val=$ex3.slider（'getValue'）；
});
@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@导入url（'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css');
.包装纸{
填充：0px；
边际上限：0px；
}
.包装纸4{
填充：0px 30px 0px 30px；
边缘顶部：10px；
}
#EX2滑块、EX3滑块、EX4滑块、EX5滑块、EX17滑块{
右边距：20px；
}
#EX1滑块。滑块选择{
背景:#ff6666；
}
#EX1滑块手柄，#EX2滑块手柄，#EX3滑块手柄{
背景:#ff6666；
}


总数



    $('#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);
    });