javascript - 如何通过 vanilla js 更新范围输入 slider 的位置？

Question

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

但是，我正在设置该值，这不会更新 slider 的位置。

我也尝试过使用:

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

强制输入更改。该事件确实会触发，但是 slider 不会在视觉上更新。

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

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

如果您能帮助解决此问题，我将不胜感激!

Answer 1

假设您的 slider (input type="range") 设置了 min 和 max 属性，您需要做的就是设置值:

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