In a form we have three input fields with the same value and these fields are displaying when we choose value from dropdown for example if I choose value "2" from dropdown the we will get two rows with six input field means three in first row and another three in second row and we have a range slider . When slider goes up then input field value should be increase by 0.5 and default value of input is 5. Problem is I can't able to display the value in input field when I am increasing the range of a slider.
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>Change event from onchange to oninput
onchange : Works when you changed the value from the input and focus(removed by mouse clicked outside input or when mouse out) is removed from slider
oninput : Works on each value entered whether there is change in focus of input(here slider) or not
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>