如何通过Vanilla JS更新范围输入滑块的位置？

Question

我正在尝试以编程方式更新我的输入滑块（类型=“范围”）的位置。

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

我也尝试过使用：

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