2

Mi pregunta es si existe alguna función o si me podrían facilitar una para que al realizar el movimiento del puntero, pueda obtener los datos en movimiento.

La pagina es: www.mibilleteravirtual.com.ar

como pueden observar los datos solo se obtienen al soltar el click, lo que busco es que muestre los datos mientras esté clickeado y deslizandolo.

4 respuestas 4

2

Creo que estas haciendo uso del evento incorrecto. El input range tiene un evento llamado mousemove, que se activa cuando el mouse esta clickeado y en movimiento. Te dejaré un ejemplo con un input range que solicita la carga de la temperatura:

<!DOCTYPE HTML>
<html>
<head>
  <title>Título de la página</title>  
  <meta charset="UTF-8">

<script>
  addEventListener('load',inicio,false);

  function inicio()
  {
    document.getElementById('temperatura').addEventListener('mousemove',cambioTemperatura,false);
  }

  function cambioTemperatura()
  {    
    document.getElementById('temp').innerHTML=document.getElementById('temperatura').value;
  }
</script>  

</head>
<body>
  <form action="#">
      Seleccione una temperatura:
      <input type="range" id="temperatura" min="0" max="100">
      <span id="temp">0</span>
      <br>
      <input type="submit" value="Confirmar">
  </form>
</body>
</html>
4
  • Gracias por la respuesta, pero no es lo que preguntaba. Lo que quiero es que al clickear y desplazar la flechita, obtenga el valor al instante mientras este esta en movimiento con el mouse clickeado. No obtener el valor al soltar el click, se entiende?
    – Juampi
    Commented el 21 ago. 2018 a las 16:36
  • Ok, ya la edité, el evento a utilizar era mousemove y escribí mousedown. Espero ayudarte, suerte! Commented el 21 ago. 2018 a las 16:49
  • Ahora si, eso buscaba gracias por la ayuda !
    – Juampi
    Commented el 21 ago. 2018 a las 16:59
  • Ok Juampi, recueda que stackoverflow en una comunidad destinada a compartir conocimiento y ayudar futuras personas con el mismo problema, y es necesario que marques la mejor respuesta como la correcta. Suerte! Commented el 21 ago. 2018 a las 17:02
0

mira esto y dime si te sirve saludos

var elementoPadre1 = document.querySelector(".inputDiv.i1");
var elementoPadre2 = document.querySelector(".inputDiv.i2");
var inputsRy = [];

function Input() {
  //<input type="range" value="35" min="0" max="100" autocomplete="off" step="1">
  this.att = {};
  this.att.type = "range";
  this.att.value = 35;
  this.att.min = 0;
  this.att.max = 100;
  this.att.autocomplete = "off";
  this.att.step = "1";
  this.input;
  this.output;

  this.crear = function(elementoPadre) {
    // crea un nuevo elemento input
    this.input = document.createElement("input");
    //para cada propiedad del objeto att establece un nuevo atributo del elemento input
    for (var name in this.att) {
      if (this.att.hasOwnProperty(name)) {
        this.input.setAttribute(name, this.att[name]);
      }
    }
    // crea un nuevo elemento div
    this.output = document.createElement("div");
    // establece el valor del atributo class del nuevo div
    this.output.setAttribute("class", "output");
    // y el contenido (innerHTML) de este
    this.output.innerHTML = this.att.value;

    // inserta los dos elementos creados al final  del elemento Padre 
    elementoPadre.appendChild(this.input);
    elementoPadre.appendChild(this.output);
  }

  this.actualizar = function() {
    this.output.innerHTML = this.input.value;
    this.att.value = this.input.value;
  }
}

// setup
var i = new Input();
i.crear(elementoPadre1);
inputsRy.push(i);

var i2 = new Input();
i2.att.value = 70;
i2.att.min = 20;
i2.att.max = 120;
i2.crear(elementoPadre2);
inputsRy.push(i2);

for (var n = 0; n < inputsRy.length; n++) {
  (function(n) {
    inputsRy[n].input.addEventListener("input", function() {
      inputsRy[n].actualizar();
    }, false)
  }(n));
}

/* Draw
function Draw(){
 requestId = window.requestAnimationFrame(Draw); 
  for( var n = 0; n< inputsRy.length; n++){
    inputsRy[n].update();
  }
}

requestId = window.requestAnimationFrame(Draw);
*/
// JavaScript Document
body{ background-color:#333; 
  font-family:"Courier New", Courier, monospace;}
.inputDiv {
  width: 300px;
  display:block;
  margin: 50px auto;
  color:#aaa;
  position:relative;
}
.output{display:inline-block; width:40px; text-align:center;}

input[type='range'] {
  display: inline-block;
  width: 250px;
}

input[type='range']:focus {
  outline: none;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
  background-color: #777;
  width: 20px;
  height: 20px;
  border: 3px solid #333;
  border-radius: 50%;
  margin-top: -9px;
}

input[type=range]::-moz-range-thumb {
  background-color: #777;
  width: 15px;
  height: 15px;
  border: 3px solid #333;
  border-radius: 50%;
}

input[type=range]::-ms-thumb {
  background-color: #777;
  width: 20px;
  height: 20px;
  border: 3px solid #333;
  border-radius: 50%;
}

input[type=range]::-webkit-slider-runnable-track {
  background-color: #777;
  height: 3px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  outline: none;
}

input[type=range]::-moz-range-track {
  background-color: #777;
  height: 3px;
}

input[type=range]::-ms-track {
  background-color: #777;
  height: 3px;
}

input[type=range]::-ms-fill-lower {
  background-color: HotPink
}

input[type=range]::-ms-fill-upper {
  background-color: black;
} 
<div class ="inputDiv i1"></div>
<div class ="inputDiv i2"></div>

4
  • Espectacular, exactamente ésto buscaba. Muchas gracias.
    – Juampi
    Commented el 21 ago. 2018 a las 16:46
  • de nada si te sirvio la respuesta no olvides votar y marcar como valida saludos!
    – andy gibbs
    Commented el 21 ago. 2018 a las 16:46
  • Listo! gracias de nuevo saludos !
    – Juampi
    Commented el 21 ago. 2018 a las 16:47
  • un placer ayudar !!
    – andy gibbs
    Commented el 21 ago. 2018 a las 16:49
0

Tan solo hay que utilizar un addEventListener con el evento input

<html>
<input type="range" name="" id="spacing">
</html>



<script>
const spacingSelector = document.getElementById('spacing')

spacingSelector.addEventListener('input', (e) => {
    const selectedSpacing = e.srcElement.value
    console.log(selectedSpacing);
})

</script>
1
  • Hola Bienvenido a Stack Overflow en español. Seguro que la respuesta es la adecuada para el solicitante, pero en este foro, si no vienen acompañadas por una explicación detallada de porque esta es la adecuada, las mismas suelen considerarse de baja calidad. Te invito a realizar el recorrido de bienvenida y leer Cómo responder. Gracias jon.
    – Javi fer2
    Commented el 2 oct. 2020 a las 17:59
0
<div>
         <p>Rango de edad</p>
         <input type="range" id="rango" onchange="cambio()">
         <input type="text" id="edad"> </div>

<script>

   function cambio() {
   
       rang = document.getElementById('rango');
       edad = document.getElementById('edad');
       edad.value = rang.value
   
   }

</script>
1
  • 1
    Tu respuesta es solo código, añade enunciados explicando cómo tu código puede ayudar, pues, aunque sea simple de entender para usuarios experimentados, siempre habrá usuarios nuevos que no entiendan el código si no hay una explicación de por medio
    – Rodrigo
    Commented el 12 feb. 2021 a las 1:55

Tu Respuesta

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

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