Jack King Jack King - 4 months ago 15
CSS Question

Move element with range directly -javascript

I want to change with the change of position (range) without cutting
When I change and I raise my hand on the (range) starts the movement
But I want to convey with the change directly

my code with run:



function move(){
var x = document.getElementById("spin").value;
var image = document.getElementById("test").style;
image.marginLeft=x+"px";
}

#test h3{
margin-left:0px;
overflow: hidden;
color:red;
}

<html>
<head>

</head>
<body>
<input type="range" name="spin" id="spin" step="1" value="0" min="0" max="500" onChange="move()" style="width:100%;"/>
<div id="test"><h3>I want move with range ):</h3></div>
</body>
</html>




Answer

Use oninput instead of onchange to change the text postiion in real-time.

function move(){
	var x = document.getElementById("spin").value;
	var image = document.getElementById("test").style;
	image.marginLeft=x+"px";
}
#test h3{
          margin-left:0px;
      overflow: hidden;
      color:red;
          }
<html>
    <head>
 
      </head>
     <body>
<input type="range" name="spin" id="spin" step="1" value="0" min="0" max="500"  oninput="move()" style="width:100%;"/>
       <div id="test"><h3>I want move with range ):</h3></div>
     </body>
    </html>