0
539
Vistas¿Cómo puedo tener un control deslizante de rango con valores negativos?
Estoy trabajando con el control deslizante <input type="range" /> con:
- valor mínimo: -20
- valor máximo: -90
- paso : 15
- el valor debe ser: -20, -35, -50, -65, -80
- el valor de -90 nunca se alcanzará debido a la restricción del paso.
Funciona con valor positivo (mín.: 20, máx.: 90, paso: 15) pero no tengo idea de cómo manejar el valor negativo.
¿Me puedes ayudar?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Establezca el valor mínimo en -80 y agregue padding-left al control deslizante para que el usuario piense que -90 es el valor mínimo.
const sliders = document.querySelectorAll("input[type=range]"); for (const slider of sliders) { slider.addEventListener('change', (e) => { e.target.nextElementSibling.value = e.target.value; }); slider.nextElementSibling.value = slider.value; } input { padding-left: 15px; } <input type="range" min="-80" max="-20" step="15" /> <output></output>
·
Juan Pablo Isaza
Denunciar
0
No puede hacerlo simplemente usando HTML ya que -90 es menor que -20, por lo que no puede establecer min="-20" max="-80" . Pero al usar este truco puede lograr su resultado.
Mantenga el HTML como:
<input type="range" min="20" max="90" step="15"/> <output></output>Cambia tu JavaScript a:
for (const slider of sliders) { slider.addEventListener("change", (e) => { e.target.nextElementSibling.value = "-" + e.target.value; }); slider.nextElementSibling.value = "-" + slider.value; }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta