javascript - 使用一个 HTML slider 移动另一个 slider 上的 handle ，而不使用 JQuery UI

Question

很简单，我正在尝试制作多个 HTML 5 slider ，这些 slider 可以根据其他 slider 的位置更改其值。一个简单但说明性的示例是，当我有两个范围输入时，它们应始终等于总值。一个从值 1 开始，另一个从值 10 开始。

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

使总数为 11。例如，如果我将 slider1 移动到 2，那么 slider2 应向下移动到 9，以保持总值 11 .

我可以使用事件监听器通过 .prop() 函数更改范围输入上的显示值:

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

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

这是我正在使用的代码的 JSFiddle:https://jsfiddle.net/zkdwr784/

Answer 1

在 slider 2 上调用更改似乎有效 -

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