Skip to main content
se añadieron 114 caracteres en el cuerpo
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28

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">5"><br>
<output id="outvol" name="outvol" for="vol">Estado medio</output>
</p>

Puedes hacerlo así, usando 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">
<output id="outvol" name="outvol" for="vol">Estado medio</output>
</p>

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>

Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28

Puedes hacerlo así, usando 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">
<output id="outvol" name="outvol" for="vol">Estado medio</output>
</p>