Javascript 如何将动画放在输入类型range:：on hover的拇指上？

在这里，我想在输入类型range thumb上放置一些动画。 在这里，我做了所有的事情，但我没有找到解决方案的动画效果悬停这里是示例和我的代码。。 请给出解决方案

这就是我想要的例子

@import'bourbon'；
$slider宽度编号：240；
$slider width:#{$slider width number}px；
$slider高度：2px；
$background滑块：#c7c7c7；
$background-filled滑块：#00BCD4；
$thumb宽度：18px；
$拇指高度：18px；
拇指半径：50%；
$thumb背景：#00BCD4；
$thumb box shadow:2px 2px 1px 10px#00BCD4；
$thumb边框：1px实心#777；
$shadow size:-8px；
$fit拇指滑块：-8px；
@函数makelongshadow（$color，$size）{
$val:5px0$size$color；
@对于$i，从6到$slider width number{
$val:#{$val}，#{$i}px 0$size{$color}；
}
@返回$val；
}
div{
高度：100px；
显示器：flex；
证明内容：中心；
}
输入{
对齐项目：居中；
外观：无；
背景：无；
光标：指针；
显示器：flex；
身高：100%；
最小高度：50px；
溢出：隐藏；
宽度：$滑块宽度；
&：焦点{
盒影：无；
大纲：无；
}
&：-webkit滑块可运行轨迹{
背景：$背景填充滑块；
内容：''；
高度：$滑块高度；
指针事件：无；
}
&：-webkit滑块拇指{
@包括尺寸（$拇指宽度$拇指高度）；
外观：无；
背景：拇指背景；
边界半径：$拇指半径；
框阴影：makelongshadow（$background slider，$shadow size）；
页边顶部：$fit拇指插入滑块；
边框：$拇指边框；
}
&：-moz音程轨迹{
宽度：$滑块宽度；
高度：$滑块高度；
}
&：-moz范围拇指{
@包括尺寸（$拇指宽度$拇指高度）；
背景：拇指背景；
边界半径：$拇指半径；
边框：$拇指边框；
位置：相对位置；
}
&：活动：：-webkit滑块拇指{
变换：尺度（2）；
}
&：-moz范围进度{
高度：$滑块高度；
背景：$背景填充滑块；
边界：0；
边际上限：0；
}
&：-ms曲目{
背景：透明；
边界：0；
边框颜色：透明；
边界半径：0；
边框宽度：0；
颜色：透明；
高度：$滑块高度；
边缘顶部：10px；
宽度：$滑块宽度；
}
&：-拇指小姐{
@包括尺寸（$拇指宽度$拇指高度）；
背景：拇指背景；
边界半径：$拇指半径；
边框：$拇指边框；
}
&：-ms填充较低{
背景：$背景填充滑块；
边界半径：0；
}
&：-ms填充上部{
背景：$背景滑块；
边界半径：0；
}
&：-ms工具提示{
显示：无；
}
}

---

这正是您想要的。如果需要更多修改，请查看此处的文档

/*WebKit/Blink的特殊样式*/
输入[类型=范围]{
-webkit外观：无；
}
输入[类型=范围]：-webkit滑块拇指{
-webkit外观：无；
边界：10；
高度：15px；
宽度：15px；
边界半径：50%；
背景：#3399cc；
光标：指针；
页边距顶部：-5px；/*您需要在Chrome中指定页边距，但在Firefox和IE中是自动的*/
过渡：全部3秒；
边界：0；
}
输入[类型=范围]：悬停：：-webkit滑块拇指{
盒影：0px 0px 0px 4px rgba（51153204,0.49）；
}
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：100%；
高度：4px；
光标：指针；
背景#3071a9；
}

---

谢谢@Awsme Sandy，但实际上，当我在“更改颜色”或“上一张幻灯片如蓝色”中增加输入类型范围时，或在“指针拇指”之后，颜色或输入类型范围为灰色。如果你能做到的话，我非常希望你能帮助我。