Mi control deslizante de entrada funciona bien al cambiar, excepto 1 pequeño problema después de hacer clic en el botón. Los valores mínimo y máximo están bien. Pero el valor real, como si fuera 570, debería estar más cerca del lado derecho porque el máximo ahora será 600 y el mínimo ahora será 400. Solo debe estar centrado si el valor es 500.
Sé que puedo cambiar el valor usando elm.value = integer ;
Entonces, ¿por qué el valor del control deslizante de rango no cambia al área definida correspondiente a los valores mínimo y máximo?
var txt = document.getElementById('txt'); txt.onchange = function() { $val = this.value; if (this.value === this.max) { this.max = parseFloat(parseFloat(100) + parseFloat($val)); this.min = parseFloat(parseFloat(-100) + parseFloat($val)); } else if (this.value === this.min) { this.max = parseFloat(parseFloat(100) + parseFloat($val)); this.min = parseFloat(parseFloat(-100) + parseFloat($val)); } output.textContent = this.value; }; txt.onchange(); key.onclick = function() { val = '570'; // round integer to nearest 100 valR = Math.round(val / 100) * 100; // if value is greater than 0 txt.max = parseFloat(valR); txt.min = parseFloat(parseFloat(-100) + parseFloat(valR)); this.value = val; txt.onchange(); }; <input id="txt" type="range" min="-100" max="100" value="0"> <span id="output"></span> <button id="key">Get Data</button>lol, el problema era que estaba llamando a this.value en la función onclick de mi botón. Necesitaba declarar el elemento de entrada. ¡Solución fácil!
var txt = document.getElementById('txt'); txt.onchange = function() { $val = this.value; if (this.value === this.max) { this.max = parseFloat(parseFloat(100) + parseFloat($val)); this.min = parseFloat(parseFloat(-100) + parseFloat($val)); } else if (this.value === this.min) { this.max = parseFloat(parseFloat(100) + parseFloat($val)); this.min = parseFloat(parseFloat(-100) + parseFloat($val)); } output.textContent = this.value; }; txt.onchange(); key.onclick = function() { val = '570'; // round integer to nearest 100 valR = Math.round(val / 100) * 100; // if value is greater than 0 txt.max = parseFloat(valR); txt.min = parseFloat(parseFloat(-100) + parseFloat(valR)); txt.value = val; txt.onchange(); }; <input id="txt" type="range" min="-100" max="100" value="0"> <span id="output"></span> <button id="key">Get Data</button>