elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [JS]Obtener el valor Input "range" en tiempo real		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [JS]Obtener el valor Input "range" en tiempo real  (Leído 5,964 veces)
SrTrp


Desconectado Desconectado

Mensajes: 327


Script/C#


Ver Perfil
[JS]Obtener el valor Input "range" en tiempo real
« 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!
En línea
EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.159



Ver Perfil
Re: [JS]Obtener el valor Input "range" en tiempo real
« Respuesta #1 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
En línea
SrTrp


Desconectado Desconectado

Mensajes: 327


Script/C#


Ver Perfil
Re: [JS]Obtener el valor Input "range" en tiempo real
« Respuesta #2 en: 14 Septiembre 2020, 03:16 am »
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
  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  ;-)  ;-)
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
con que programa modifico "variables" en tiempo real un juego ????
Ingeniería Inversa 		00000001 2 2,843 Último mensaje 26 Enero 2007, 21:06 pm
por tena
"Honeymap": ciberataques en tiempo real
Noticias 		wolfbcn 1 4,363 Último mensaje 29 Septiembre 2012, 05:05 am
por dimitrix
Así es cómo "perdemos" el tiempo en internet en tiempo real
Noticias 		wolfbcn 0 2,882 Último mensaje 3 Junio 2014, 18:14 pm
por wolfbcn
Probando aplicaciones de auditoría web con Google Web "Firing Range"
Noticias 		r32 0 1,970 Último mensaje 23 Noviembre 2014, 02:22 am
por r32
Obtener el valor en tiempo real de un campo de una base de datos (Mysql)
Scripting 		cosmosvega 1 7,614 Último mensaje 21 Julio 2020, 00:50 am
por Drakaris
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines