CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jack King
Jack King

Reputation: 231

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>

Upvotes: 2

Views: 1873

Answers (2)

Jari Pekkala
Jari Pekkala

Reputation: 887

Change the event listener from change to mousemove.

For better animation performance use CSS transform property.

function move(){
    var x = document.getElementById("spin").value;
    var image = document.getElementById("test");
    image.style.transform = "translateX(" + x + "px)";
}
body {
   overflow-x: hidden;
}

#test {
   will-change: transform;
}

#test h3{
   margin-left:0px;
   overflow: hidden;
   color:red;
}
            
<input type="range" name="spin" id="spin" step="1" value="0" min="0" max="500" onmousemove="move()" style="width:100%;"/>
<div id="test"><h3>I want move with range ):</h3></div>

Upvotes: 2

Shubham Khatri
Shubham Khatri

Reputation: 281804

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>

Upvotes: 3

Related Questions