如何在每次更改时立即将滑块值转换为多个表单输入字段?

Question

在一个表单中，我们有三个具有相同值的输入字段，当我们从下拉菜单中选择value时，这些字段将显示出来，例如，如果我选择value "2"从下拉列表中，我们将得到两行6个输入字段，第一行3个，第二行3个，我们有一个范围滑块。当滑块上升时，输入字段值应增加0.5，输入的默认值为5。问题是，当我增加滑块的范围时，我无法在输入字段中显示值。

function changeslider(val) {
console.log(val)
document.getElementById('slide1').value = val;
document.getElementById('slide2').value = val;
document.getElementById('slide3').value = val;
}

<div class="form-group">
<label>No. of Rounds</label>
<select class="form-control select2 select2-init" id="state_0" 
name="Address">
<option value="Select number rows">Select number rows</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<input class="range" type="range" min="0" value="5" step="0.5" 
id="myrange" onchange="changeslider(this.value);">
<tbody id="tbody">
<tr id="table_tr">
<td><input type="text" class="form-control" id="slide1" name="round1[]" value="0" required></td>
<td><input type="text" class="form-control" id="slide2" name="round2[]" value="0" required/></td>
<td><input type="text" class="form-control" id="slide3" name="round3[]" value="0" required/></td>
</tr>
</tbody>

Answer 1

将事件从onchange更改为oninput

onchange:当您更改input的值并从滑块

中删除焦点(通过单击鼠标在输入外部或鼠标退出时删除)时工作。oninput:无论input(这里是滑块)的焦点是否改变，都对输入的每个值起作用

function changeslider(val) {
console.log(val)
document.getElementById('slide1').value = val;
document.getElementById('slide2').value = val;
document.getElementById('slide3').value = val;
}

<input class="range" type="range" min="0" value="5" step="0.5" id="myrange" oninput="changeslider(this.value);">
<tbody id="tbody">
<tr id="table_tr">
<td><input type="text" class="form-control" id="slide1" name="round1[]" value="0" required></td>
<td><input type="text" class="form-control" id="slide2" name="round2[]" value="0" required/></td>
<td><input type="text" class="form-control" id="slide3" name="round3[]" value="0" required/></td>
</tr>