I want to use the Input[type=range] to rotate the red circle with the id of outer, I tried to select the circle’s style, then transform, and that is equal to the value of the input, but it has to be between the parenthesis in rotateZ(), which is a string. Here is my code;
var value = document.getElementById("slider").value;
console.log(value);
document.getElementById("inner").style.transform = document.getElementById("slider").value; body {
display:flex;
align-items:center;
justify-content:center;
}
#outer {
background:red;
height:20vw;
position:relative;
border-radius:50%;
width:20vw;
display:flex;
justify-content:center;
}
#inner {
transform:translateY(10%);
border-bottom-left-radius:100%;
border-bottom-right-radius:100%;
position:absolute;
bottom:0;
background:darkgreen;
width:10%;
height:50%;
} <div id="outer"><div id="inner"></div></div>
<input min="0" max="360" type="range" id="slider">But it doesn’t work. I need to somehow put the value between parenthesis.
>Solution :
Two things, first of all as you said you can’t just set it to a number, but need to set it to a string, here using a template literal. Secondly, since you want the rotation linked to the slider, you’ll need to add a listener to the slider in this case listening for an input event which gives the most immediate feedback.
var slider = document.getElementById("slider");
slider.addEventListener('input', () => {
document.getElementById("outer").style.transform = `rotate(${slider.value}deg)`;
});body {
display:flex;
align-items:center;
justify-content:center;
}
#outer {
background:red;
height:20vw;
position:relative;
border-radius:50%;
width:20vw;
display:flex;
justify-content:center;
}
#inner {
transform:translateY(10%);
border-bottom-left-radius:100%;
border-bottom-right-radius:100%;
position:absolute;
bottom:0;
background:darkgreen;
width:10%;
height:50%;
}<div id="outer">
<div id="inner">
</div>
</div>
<input min="0" max="360" type="range" id="slider">