如何通过香草 js 更新范围输入滑块的位置?

Question

我正在尝试以编程方式更新输入滑块的位置(type="range"(。

但是，我正在设置不会更新滑块位置的值。

我也尝试使用：

element.dispatchEvent(new Event('input'))

以强制更改输入。此事件会触发，但是，滑块不会直观地更新。

function changeSliderPosition(position) {
let e = document.getElementById('mySlider');
e.value = position;
//Also set the position of the slider to position
}

我已经看到了一些在 JQuery 中工作的解决方案，但我不想包含整个库，甚至根本不想将其用于这样一个看似很小的问题。

我将不胜感激对这个问题的任何帮助！

Answer 1

假设您的滑块 (input type="range"( 设置了其min和max属性，您需要做的就是设置value：

let input = document.getElementById("in");
let btn = document.querySelector("button");
let slider = document.querySelector("input[type='range']");
btn.addEventListener("click", function(){
slider.value = input.value;
});

Enter the value you want: <input id="in"><button>Go!</button><br>
<input type="range" min="1" max="100">