My question is if there is a function or if you could provide me with one so that when you move the pointer, you can get the data in motion.
The page is: www.mibilleteravirtual.com.ar
As you can see the data is only obtained by releasing the click, what I'm looking for is to show the data while it is clicked and sliding.
I think you're using the wrong event. The input range has an event called mousemove , which is activated when the mouse is clicked and in motion. I'll leave you an example with an input range that requests the loading of the temperature:
<!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>
Look at this and tell me if it serves you greetings
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 Documentbody{ 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>