Solo estoy tratando de hacer que el filtro de rango se pueda cambiar no arrastrando el filtro, sino escribiendo el valor. El valor se actualiza automáticamente en console.log, pero visualmente no se queda en un solo lugar (y luego tengo un problema para tomar el valor por el método $_POST.
<input id="range_filter" class="range-slider__range sum" type="range" value="10000" min="5000" max="100000" oninput="editor.value = range_filter.value"> <span contenteditable="true" id="editor" class="range-slider__value">0</span> function edit() { //console.log("input event fired"); var val1 = document.getElementById("range_filter").value; document.getElementById('editor').value = document.getElementById('editor').innerHTML; var val2 = document.getElementById("editor").value; val1 = val2; console.log(val1); console.log(val2); } var el = document.getElementById("editor"); if(el) { el.addEventListener('input', edit, false); }Cuando establece val en document.getElementById(...).value , entonces val ya no es una referencia al valor del elemento, es solo un número almacenado en una variable, lo mismo que si hubiera escrito let x = 5 .
En lugar de extraer el valor, simplemente mantenga las referencias a los elementos.
function edit() { const slider = document.getElementById("range_filter"); const numberInput = document.getElementById("editor"); slider.value = numberInput.value; } var el = document.getElementById("editor"); if (el) { el.addEventListener('input', edit, false); } Además, no hay motivo para que la entrada sea un <span> . Eso no limita la entrada del usuario solo a números. Simplemente conviértalo en un <input type="number"> estándar.
<input id="range_filter" class="range-slider__range sum" type="range" value="10000" min="5000" max="100000" oninput="editor.value = range_filter.value"> <input type="number" id="editor" class="range-slider__value" value="0" />