如何通过 vanilla 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">