Javascript 移动范围拇指时设置范围刻度动画

我有一个自定义的

input type=“range”

，

span

，它显示范围的值和

div

，其中许多

p

用作记号。我使用自定义

div

来显示刻度，因为范围上的

earance:none

隐藏刻度。我正在用DOM生成刻度

我已经使用滑块拇指作为曲线边框，并将带有范围值的

span

用作圆拇指。它不能在与滑块连接的地方弯曲，但仍然可以正常工作

---

我想实现动画的蜱去拇指的地方，它的位置。这是预期的结果：

这是我的密码和密码

//在此处创建记号以防止长HTML代码
var i；
const tickContainer=document.getElementById（'tickContainer'）；
对于（i=1；i{
const newValue=数字（（range.value-range.min）*100/（range.max-range.min））；
常数newPosition=35-（newValue*0.7）；
rangeV.style.left=`calc（${newValue}%+（${newPosition}px））`；
rangeV.innerHTML=`${range.value}%`；
};
//初始化setValue onload和oninput
document.addEventListener（“DOMContentLoaded”，setValue）；
range.addEventListener（'input'，setValue）；

正文{
字体系列：Arial；
利润率：50像素；
}
.全套{
位置：相对位置；
}
/*范围内记号（线）的样式*/
.蜱{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：证明；
-ms-flex-pack:justify；
证明内容：之间的空间；
位置：绝对位置；
宽度：100%；
}
.蜱{
位置：相对位置；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
文本对齐：居中；
宽度：1px；
背景#d3；
高度：10px；
线高：40px；
利润率：0.20px0；
}
/*设置系列的样式*/
输入[类型=范围]{
-webkit外观：无；
外观：无；
利润率：20px0；
宽度：100%；
高度：4px；
背景图像：线性梯度（125度，#E034%，#0008d7 100%）；
大纲：无；
}
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：100%；
高度：4px；
光标：指针；
边界半径：25px；
}
输入[类型=范围]：-moz范围轨迹{
宽度：100%；
高度：4px；
光标：指针；
边界半径：25px；
}
输入[类型=范围]：-webkit滑块拇指{
高度：70像素；
宽度：70px；
-webkit变换：translateY（-44.3%）旋转（-45度）；
变换：translateY（-44.3%）旋转（-45度）；
-webkit外观：无；
外观：无；
背景：ddd；
边框：3倍纯色透明；
边框颜色：透明透明#fff#fff；
边界半径：50%；
光标：指针；
背景图像：线性渐变（白色，白色），线性渐变（向右，#E034%，#0008d7 100%）；
背景附件：固定，固定；
背景剪辑：填充框、边框框；
}
输入[类型=范围]：-moz范围拇指{
高度：70像素；
宽度：70px；
变换：旋转（45de）；
外观：无；
背景：ddd；
边框：3倍纯色透明；
边界半径：50%；
光标：指针；
背景图像：线性渐变（白色，白色），线性渐变（向右，#E034%，#0008d7 100%）；
背景附件：固定，固定；
背景剪辑：填充框、边框框；
}
/*范围值（标签）在范围内*/
.范围值{
位置：绝对位置；
前-50%；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
z指数：99；
用户选择：无；
选择：无；
指针事件：无；
}
.范围值范围{
宽度：50px；
高度：50px；
线高：50px；
文本对齐：居中；
颜色：#fff；
背景：#0008d7；
字号：18px；
显示：块；
位置：绝对位置；
顶部：20px；
边界半径：50%；
用户选择：无；
选择：无；
指针事件：无；
z指数：100；
}

---

这里有一个使用

遮罩的想法。诀窍是使用背景创建记号（以避免大量元素），然后我使用遮罩创建拇指周围的曲线形状。遮罩由
径向渐变组成（将根据拇指值移动的圆形）和
线性渐变
来创建基础


//在此处创建记号以防止长HTML代码
var i；
const tickContainer=document.getElementById（'tickContainer'）；
//显示范围值的量程位置-不重要
const range=document.getElementById（'range'）；
const rangeV=document.getElementById（'rangeValue'）；
常量设置值=（）=>{
const newValue=数字（（range.value-range.min）*100/（range.max-range.min））；
常数newPosition=35-（newValue*0.7）；
rangeV.style.left=`calc（${newValue}%+（${newPosition}px））`；
tickContainer.style.setProperty（'--p'，'calc（${newValue}%）`）；
rangeV.innerHTML=`${range.value}%`；
};
//初始化setValue onload和oninput
document.addEventListener（“DOMContentLoaded”，setValue）；
range.addEventListener（'input'，setValue）；
正文{
字体系列：Arial；
利润率：50像素；
}
.全套{
位置：相对位置；
}
/*范围内记号（线）的样式*/
.蜱{
位置：绝对位置；
左：-15px；
右图：-15px；
填充：0 15px；
顶部：-25px；
高度：45px；
背景：重复线性渐变（向右，#D3 0 2px，透明2px 6px）；
背景剪辑：内容框；
-网络工具包掩码：
径向梯度（底部最远侧，#fff 98%，透明）var（-p，0）0px/100px 50px，
线性梯度（#fff，#fff）底部/100%10px；
-webkit掩码重复：无重复；
面具：
径向梯度（底部最远侧，#fff 98%，透明）var（-p，0）0px/100px 50px，
线性梯度（#fff，#fff）底部/100%10px；
面罩重复：不重复；
}
/*斯泰林