如何在滑块每次变化时实时将值同步到多个表单输入框？

表单默认每行包含3个同值输入框，可通过下拉菜单选择需要展示的行数，例如下拉选择值“2”时会生成2行共6个输入框（第一行3个，第二行3个）。页面另有一个range滑块，滑动滑块时所有输入框的值需以0.5为步长增减，输入框的默认值为5。

调整滑块量程时，无法将滑块值正常显示到所有输入框中。

JS代码 #

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

HTML代码 #

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

• 原代码只给第一行3个输入框设置了固定id slide1/slide2/slide3，新增行的输入框id会重复，DOM仅能识别第一个匹配id的元素，导致新增行输入框无法同步滑块值
• 输入框初始value设置为0，和要求的默认值5不符
• changeslider函数仅修改固定3个id的输入框值，没有覆盖动态生成的所有输入框

JS代码 #

// 页面加载完成自动同步滑块默认值到输入框
window.onload = function() {
  const initVal = document.getElementById('myrange').value
  changeslider(initVal)
}

// 下拉菜单切换行数逻辑
document.getElementById('state_0').addEventListener('change', function(e) {
  const rowCount = parseInt(e.target.value) || 1
  const tbody = document.getElementById('tbody')
  // 清空现有行
  tbody.innerHTML = ''
  // 生成对应行数的输入框
  for(let i=0; i<rowCount; i++) {
    const tr = document.createElement('tr')
    tr.innerHTML = `
      <td><input type="text" class="form-control slide-input" name="round1[]" value="${document.getElementById('myrange').value}" required></td>
      <td><input type="text" class="form-control slide-input" name="round2[]" value="${document.getElementById('myrange').value}" required></td>
      <td><input type="text" class="form-control slide-input" name="round3[]" value="${document.getElementById('myrange').value}" required></td>
    `
    tbody.appendChild(tr)
  }
})

// 滑块值同步所有输入框
function changeslider(val) {
  // 按类名选中所有输入框批量赋值
  const allInputs = document.querySelectorAll('.slide-input')
  allInputs.forEach(input => {
    input.value = val
  })
}

HTML代码 #

<div class="form-group">
     <label>行数选择</label>
     <select class="form-control select2 select2-init" id="state_0" 
     name="Address">
     <option value="Select number rows">请选择行数</option>
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
     </select>
  </div>
<!-- 滑块事件改为oninput，滑动过程实时同步值 -->
<input class="range" type="range" min="0" value="5" step="0.5" 
 id="myrange" oninput="changeslider(this.value);">

<table>
  <tbody id="tbody">
    <tr id="table_tr">
      <!-- 移除固定id，统一添加slide-input类名，初始值改为5 -->
      <td><input type="text" class="form-control slide-input" name="round1[]" value="5" required></td>
      <td><input type="text" class="form-control slide-input" name="round2[]" value="5" required/></td>
      <td><input type="text" class="form-control slide-input" name="round3[]" value="5" required/></td>
    </tr>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者pr_learner