+ 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

23rd Dec 2018, 11:35 AM

CodeBoi Tutorials

2 Answers

+ 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>

23rd Dec 2018, 1:02 PM

Ikechukwu Okonkwo

+ 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; }

23rd Dec 2018, 12:47 PM

Игорь Яковенко