Can you rotate an element using a input value?


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.

Source: CSS – Stack Overflow

November 20, 2021
Category : News
Tags: css | DOM | html | javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.