Javascript 使用一个HTML滑块在另一个滑块上移动句柄，而不使用JQuery UI

非常简单，我尝试制作多个HTML5滑块，根据其他滑块的位置更改其值。一个简单但说明性的例子是，当我有两个量程输入时，它们应该总是等于一个总值。一个从值1开始，另一个从值10开始

<input id='slider1' type='range' min='1' max='10' value='1'/>
<input id='slider2' type='range' min='1' max='10' value='10'/>

但是，这不会更新范围输入上控制柄的位置。从我在这里做的研究来看，似乎每个人都说这个解决方案应该有效，但我不确定为什么它对我无效。顺便说一句，我正在尝试不用JQueryUI来完成这个任务

---

下面是我正在使用的一段代码：

在Slider2上调用change似乎是可行的-

$(document).ready(function() {
    var max_total = 11;
    $("#slider1").on("change", function(){
        var slider1 = this.value;
        $("#slider2").prop("value", max_total - slider1);
        $("#slider2").change();
    });
});

$(document).ready(function() {
    var max_total = 11;
    $("#slider1").on("change", function(){
        var slider1 = this.value;
        $("#slider2").prop("value", max_total - slider1);
        $("#slider2").change();
    });
});