[JS]Obtener el valor Input "range" en tiempo real

Iniciado por SrTrp, 14 Septiembre 2020, 02:24 AM

0 Miembros y 1 Visitante están viendo este tema.

SrTrp

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 (javascript) [Seleccionar]

$("#rango").on("change keyup paste click propertychange mousedown", function(){
    document.getElementById("money").innerHTML= $("#rango").val();+"USD";
});

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!

EdePC

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 (javascript,7,8) [Seleccionar]
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<input type="range" id="rango" value="0">
<div id="money">0 USD</div>

<script>
  $('#rango').on('input', function() {
    $('#money').html( $(this).val() + ' USD' )
  })
</script>


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

SrTrp

Cita de: 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 (javascript,7,8) [Seleccionar]
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<input type="range" id="rango" value="0">
<div id="money">0 USD</div>

<script>
  $('#rango').on('input', function() {
    $('#money').html( $(this).val() + ' USD' )
  })
</script>


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

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