0

Quisiera que me apoyaran a cambiar los valores numericos de impresion en un input "range"

<p><label for="vol">Nivel de Sanidad:</label>
<input style="width:80%;" type="range" id="vol" name="vol" min="0" max="1" step="0.02" value="0.5" 
onchange="document.getElementById('outvol').value=value" list="tickmarks">
<output id="outvol" name="outvol" for="vol">0.5</output>
</p>
</body>
<datalist id="tickmarks">
    <option value="0"></option>
    <option value="0.1"></option>
    <option value="0.2"></option>
    <option value="0.3"></option>
    <option value="0.4"></option>
    <option value="0.5"></option>
    <option value="0.6"></option>
    <option value="0.7"></option>
    <option value="0.8"></option>
    <option value="0.9"></option>
    <option value="1"></option>
</datalist>

que en lugar de 0.1 me mostrara mal estado en 0.2 estado bajo y así en cada valor un texto diferente

1 respuesta 1

1

Puedes hacerlo así, usando el controlador de eventos oninput de javascript:

var slider = document.getElementById("vol");
var output = document.getElementById("outvol");
let estado = 'estado medio';

output.innerHTML = estado;

slider.oninput = function() {
  correlacion_valores = {
    '0': 'sin estado',
    '0.1': 'mal estado',
    '0.2': 'estado bajo',
    '0.3': 'estado no tan bajo',
    '0.4': 'estado menos bajo',
    '0.5': 'estado medio',
    '0.6': 'estado medio y subiendo',
    '0.7': 'estado notable bajo',
    '0.8': 'estado notable alto',
    '0.9': 'estado superior',
    '1': 'estado máximo'
  }

  estado = correlacion_valores[this.value];
  output.innerHTML = estado;
};
<p><label for="vol">Nivel de Sanidad:</label>
<input style="width:80%;" type="range" id="vol" name="vol" min="0" max="1" step="0.1" value="0.5"><br>
<output id="outvol" name="outvol" for="vol">Estado medio</output>
</p>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.