如何在javascript中旋转输入类型范围？

我有一个

，想旋转拇指-但只在输入时旋转拇指

我的问题是：当我尝试旋转它时，它会旋转整个滑块

有人能帮我吗

功能幻灯片（事件）{
event.target.style.WebKittTransform='旋转（20度）'；
}

.slidecontainer{
宽度：100%；
}
.滑块{
-webkit外观：无；
外观：无；
宽度：100%；
高度：20px；
背景#d3；
大纲：无；
不透明度：0.7；
-webkit转换：.2s；
转变：不透明度；
边界半径：20px；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：50px；
高度：50px；
边界半径：50px；
背景：灰色；
背景图片：url（img/thumb.png）；
背景尺寸：35px 35px；
背景位置：中心；
背景重复：无重复；
光标：指针；
}
.滑块：：-moz范围拇指{
宽度：50px；
高度：50px；
边界半径：50px；
背景：灰色；
背景图片：url（img/thumb.png）；
背景尺寸：35px 35px；
背景位置：中心；
背景重复：无重复；
光标：指针；
}

<代码> > p>因为不能使用JS来定位伪元素，请考虑使用CSS变量。您在输入元素中定义它们，它们是由拇指继承的；因此，你可以轻松地实现你想要的


功能幻灯片（事件）{
event.target.style.setProperty（'--r'，event.target.value+'deg'）；
}
.slidecontainer{
宽度：100%；
}
.滑块{
-webkit外观：无；
外观：无；
宽度：100%；
高度：20px；
背景#d3；
大纲：无；
不透明度：0.7；
转变：不透明度；
边界半径：20px；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：50px；
高度：50px；
边界半径：50px；
背景：线性梯度（红色50%，蓝色0）；
光标：指针；
显示：内联块；
变换：旋转（var（-r，180度））；
}
.滑块：：-moz范围拇指{
宽度：50px；
高度：50px；
边界半径：50px；
背景：线性梯度（红色50%，蓝色0）；
光标：指针；
显示：内联块；
变换：旋转（var（-r，180度））；
}