如果没有jQuery插件，如何动态更改[input="；range"；]的样式？

实际上，这就是我想要的：

在这种情况下，当您拖动范围拇指（在红色区域中）时，顶部滑块的范围拇指正在更改（在绿色区域中）

这就是我想要的：当我拖动滑块时，它的颜色/样式会根据我拇指的位置而改变

我不知道他们是怎么做到的

我找到了一些jQuery slider（范围）插件，但我想让应用程序保持简单

我能做什么

---

我想到的是使用JavaScript在HTML代码中设置新的

标记。但是这种方式听起来很奇怪。有更好的方法吗？

香草JS

我没有时间在Vanilla JS中准确复制您想要的内容。我已经在这个代码笔上测试了类似的功能：

我将向您提供下面的代码，您在这里有您需要的所有部分，无需任何库/框架即可完成您想要的任务

基本上，不是将第一个范围附加到html元素上，而是附加到另一个范围上

但是，正如您所看到的，这并不是因为您不使用库，所以您将使代码保持简单

var Range=function（输入、范围、拇指、onChangeCallback）{
var startElement，
inputEvent=（！navigator.userAgent.match（/MSIE | Trident/g））？“输入”：“更改”，
inputScope=input.getAttribute（“最大”）-input.getAttribute（“最小”），
rangeScope=range.offsetWidth-thumb.offsetWidth，
rangeOffset=range.getBoundingClientRect（）.left+document.body.scrollLeft，
thumbHalfOffset=thumb.offsetWidth/2，
设置值=函数（值）{
如果（值范围范围-thumbHalfOffset）{
thumb.style.left=rangeScope+“px”；
}否则{
thumb.style.left=值-thumbHalfOffset+“px”；
}
返回数学楼层（（值*输入范围）/范围范围范围）；
}, 
firstWayBinding=函数（e）{
var值=（范围范围/输入范围）*e.target.value；
设置值（值）；
onChangeCallback&&onChangeCallback（如target.value、value）；
},
secondWayBinding=函数（值）{
input.value=值；
},
开始移动=功能（e）{
e、 预防默认值（）；
var pageX=（e.touchs&&e.touchs[0]&&e.touchs[0].pageX）| e.pageX，
pageY=（e.touchs&&e.touchs[0]&&e.touchs[0].pageY）| e.pageY，
rangeValue=（pageX-rangeOffset
正文{
最大宽度：300px；
填充：16px；
}
.射程{
高度：25px；
宽度：100%；
位置：相对位置；
背景色：#ccc；
}
.幻灯片{
位置：绝对位置；
宽度：100%；
身高：100%；
z指数：2；
}
.拇指{
位置：绝对位置；
背景色：#aaa；
宽度：12px；
高度：计算（100%-2px）；
边框：1px实心；
光标：移动；
左：0；
z指数：1；
}
香草JS

我没有时间在Vanilla JS中准确复制您想要的内容。我已经在这个代码笔上测试了类似的功能：

我将向您提供下面的代码，您在这里有您需要的所有部分，无需任何库/框架即可完成您想要的任务

基本上，不是将第一个范围附加到html元素上，而是附加到另一个范围上

但是，正如您所看到的，这并不是因为您不使用库，所以您将使代码保持简单


var Range=function（输入、范围、拇指、onChangeCallback）{
var startElement，
inputEvent=（！navigator.userAgent.match（/MSIE | Trident/g））？“输入”：“更改”，
inputScope=input.getAttri