En un formulario, tenemos tres campos de entrada con el mismo valor y estos campos se muestran cuando elegimos el valor del menú desplegable, por ejemplo, si elijo el valor "2" del menú desplegable, obtendremos dos filas con seis campos de entrada que significan tres en la primera fila y otros tres en la segunda fila y tenemos un control deslizante de rango. Cuando el control deslizante sube, el valor del campo de entrada debe aumentar en 0,5 y el valor predeterminado de entrada es 5. El problema es que no puedo mostrar el valor en el campo de entrada cuando estoy aumentando el rango de un control deslizante.
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>Cambiar evento de onchange a oninput
onchange : funciona cuando cambió el valor de la input y el foco (eliminado al hacer clic con el mouse fuera de la entrada o cuando el mouse está fuera) se elimina del control deslizante
oninput : funciona en cada valor ingresado, ya sea que haya un cambio en el enfoque de input (aquí el control deslizante) o no
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>