使用 javascript 使用 slider 范圍內的值更新輸入字段值

Question

我正在嘗試修改從 W3Schools 獲得的操作示例

該示例是范圍 slider，它在<span>標記內顯示 slider 的值

我想做的是在輸入字段中顯示值

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

資料來源： W3Schools 范圍 slider 示例

我想在輸入字段而不是<span>標記中顯示值，因此我嘗試修改示例：

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <input type="number" id="demo" name="fname" value="">

</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo").value = slider.value;
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

但這不起作用，因為它只顯示初始值，如果我移動 slider 旋鈕則不會更新

Answer 1

您可以將元素的引用存儲在 output var 中，而不是 innerHTML 您可以只使用 value 屬性。

這是供您參考的更新代碼：

 var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.value = slider.value; slider.oninput = function() { output.value = this.value; }

 <div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> <input type="number" id="demo" name="fname" value=""> </div>

Answer 2

在onchange="myfunction()"范圍內設置一個 onchange function，這樣每次您更改 slider 時都會調用此 function。

在 function slider.value demo.value 設置為demo.value

 var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); function myfunction() { demo.value = slider.value }

 <div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider" id="myRange" onchange="myfunction()"> <input type="number" id="demo" name="fname" value=""> </div>