0

Quiero lograr que cada vez que se cambie el valor del input tipo range, se coloque el value en el div, lo que tengo es lo siguiente:

formulario.component.html

<div class="col-md-auto mt-4">
   <label class="mr-4">Porcentaje<span class="text-danger">*</span></label>
   <div class="box">
      <div id="value"></div>
   </div>
   <input id="slider" class="slider" (change)="value()" type="range" min="1" max="100" value="50">
</div>

formulario.component.ts

value() {
   var slider = document.getElementById('slider');
   var val = document.getElementById('value');
   console.log(slider);
   console.log(val);
}

Por el momento solo estoy imprimiendo ambos elementos en consola, pero cuando coloco dentro del formulario.component.ts lo siguiente:

value() {
   var slider = document.getElementById('slider');
   var val = document.getElementById('value');
   val.innerHTML = slider.value;
}

Me aparece el error "Property 'value' does not exist on type 'HTMLElement'.ts(2339)" y no sé cómo lograrlo, agradecería su ayuda.

1 respuesta 1

0

El problema es que TypeScript es fuertemente tipado. Por esa razón, document.getElementById('slider') regresa un objeto del tipo HTMLElement, el cuál no contiene la propiedad value. En cambio, HTMLInputElement sí la contiene, así que se tiene que hacer la conversión:

var slider =<HTMLInputElement> document.getElementById('slider');

1
  • Muchas gracias, me funcionó, no tenía idea c: el 17 jun. 2019 a las 18:43

Tu Respuesta

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

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