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>
