+ 2
How do you use the <input range> tag in html
I want to use the slider to change the size of something, how would I do this, I can also use js
2 Réponses
+ 8
Aleksis Vanags below is an example of a circle with its width varied...☺☺☺☺
<!DOCTYPE html>
<html>
<head>
<title>Input Slider</title>
</head>
<body>
<div id="circle"></div>
<p>Change width</p>
<input type="range" id="R1" oninput="Slide()" min=100 max=200 value=120>
<style>
#circle {
border: 5px solid red;
border-radius: 50%;
width: 120px;
height: 120px;
}
</style>
<script>
function Slide()
{
var x=document.getElementById('R1').value; document.getElementById("circle").style.width=x+"px";
}
</script>
</body>
</html>
+ 3
Here is a simple example, it is not difficult)
HTML:
<input type="range" min="0" max="10" id="size" oninput="f()" value="0">
JS:
var size;
function f(){
size=document.getElementById("size").value;
}