如何使用input[type=range]滑块的输入值控制指定DOM元素的旋转角度

我想要使用Input[type=range]控制id为outer的红色圆圈旋转，我尝试选中元素的style下的transform属性，将其赋值为input的输入值，但该值需要放在字符串格式的rotateZ()的括号中才能生效。以下是我的代码：

现有代码 #

JS 代码 #

var value = document.getElementById("slider").value;
console.log(value);
document.getElementById("inner").style.transform = document.getElementById("slider").value;

CSS 代码 #

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

HTML 代码 #

<div id="outer"><div id="inner"></div></div>
<input min="0" max="360" type="range" id="slider">

上述代码未生效，需要找到将输入值插入到rotateZ括号内的方法。

使用模板字符串（Template Literals）即可实现，将变量放在反引号包裹的内容中，以${变量名}的格式直接插入到rotate函数的括号内即可，注意需要额外补充旋转的角度单位deg，同时需要给滑块绑定值变化监听事件才能实时触发旋转效果。
修改后的完整JS代码：

const slider = document.getElementById('slider')
const rotateTarget = document.getElementById('outer') // 若需要旋转内部绿色指针则替换为 inner

slider.addEventListener('input', function() {
  const currentValue = this.value
  rotateTarget.style.transform = `rotateZ(${currentValue}deg)`
})

内容的提问来源于stack exchange，提问作者Proking73Questioneer