Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: SrTrp en 14 Septiembre 2020, 02:24 am



Título: [JS]Obtener el valor Input "range" en tiempo real
Publicado por: SrTrp en 14 Septiembre 2020, 02:24 am
Hola, lo que estoy trantando de hacer es que mientras muevo el con el mouse mi input range, valla mostrando el valor actual, pero solo logro obtener ese efecto cuando suelto el click.
Eh probado con jquery y no tengo resultados.
Código
  1. $("#rango").on("change keyup paste click propertychange mousedown", function(){
  2.     document.getElementById("money").innerHTML= $("#rango").val();+"USD";
  3. });
  4.  
Lo que metí en la función on son los eventos que eh probado change,click ect..
les agradecería si alguien sabe como puedo lograr esto!


Título: Re: [JS]Obtener el valor Input "range" en tiempo real
Publicado por: EdePC en 14 Septiembre 2020, 02:55 am
Saludos,

- Usa el evento input (oninput), es funciona inmediatamente al cambiar el value de un input, a diferencia de onchange que solo funciona cuando se terminó de cambiar el value del input:

Código
  1. <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  2.  
  3. <input type="range" id="rango" value="0">
  4. <div id="money">0 USD</div>
  5.  
  6. <script>
  7.  $('#rango').on('input', function() {
  8.    $('#money').html( $(this).val() + ' USD' )
  9.  })
  10. </script>

En vivo: https://jsbin.com/pemasiyeya/edit?html,output


Título: Re: [JS]Obtener el valor Input "range" en tiempo real
Publicado por: SrTrp en 14 Septiembre 2020, 03:16 am
Saludos,

- Usa el evento input (oninput), es funciona inmediatamente al cambiar el value de un input, a diferencia de onchange que solo funciona cuando se terminó de cambiar el value del input:

Código
  1. <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  2.  
  3. <input type="range" id="rango" value="0">
  4. <div id="money">0 USD</div>
  5.  
  6. <script>
  7.  $('#rango').on('input', function() {
  8.    $('#money').html( $(this).val() + ' USD' )
  9.  })
  10. </script>

En vivo: https://jsbin.com/pemasiyeya/edit?html,output

Me funciono a la perfección gracias, por que ya pensaba meter un interval  ;-)  ;-)