I am just trying to make range filter can be changeable not by dragging the filter, but by typing the value. The value its self updates in console.log, but visually doesn`t just stays on one place (and then I have a problem to take value by $_POST method.
<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);
}
When you set val to document.getElementById(...).value, then val is not a reference to the element's value anymore - it's just a number stored in a variable, the same as if you had written let x = 5.
Instead of extracting the value, just keep references to the elements.
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);
}
Also, there's no reason for the input to be a <span>. That doesn't limit user input to numbers only. Just make it a standard <input type="number">.
<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" />