riflettere valore di campo input range in live

steve97

Utente Attivo
30 Mar 2017
53
0
6
vorrei che quando vado a spostare col mouse con il click sinistro la rotellina del input venisse automaticamente riflettuto i cambiamenti, al momento sono riuscito solo a riflettere il valore dopo che rilascio la rotellina con questo codice
HTML:
<style>
body{background-color: orange;}
input[type="range"]{display:block;}
div#product {margin-top:10em; margin-left:10em; width:250px; /*transform:rotate(-90deg);*/}
</style>
<input type="text" id="text">
<button onclick="rot()">rotate text</button>
<div id="product"></div>
<input type="range" id="upvolume" name="volume"
min="0" max="360" value="0" onmousedown="console.log(this.value)">
<input type="range" id="downvolume" name="volume" onmouseup="rot()"
min="0" max="360" value="360">
<script>
prod = document.getElementById("product");
    function rot(){
       text = document.getElementById('text').value;
       //console.log(text);
       prod.innerText = text;
       up = document.querySelector("#upvolume").value;
       down = document.querySelector("#downvolume").value;
       console.log(down);
       if(up == "0") {
       prod.style.transform = 'rotate(-'+down+'deg)';
       }
       if(down == "360") {
       prod.style.transform = 'rotate('+up+'"deg")';
       }
       console.log(document.querySelector("#upvolume").value);
       console.log(document.querySelector("#downvolume").value);

    }
prod.addEventListener("change", function(){alert("ok");})
</script>