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