Javascript CSS：如何设置HTML5输入范围的样式，使其具有不同的背景颜色和宽度？

我正在使用HTML5输入范围，我需要设置滑块的样式，使其具有不同的颜色（

黑色

）和宽度（

2px

），直到滑块的位置，并将其设置为滑块后有

#393837

和

1px

。
下图为插图，图中颜色较深且较厚，图中颜色较薄：

到目前为止，我所取得的成就是，在滑块中使用

393837

颜色

滑块{
宽度：100%；
高度：1px；
大纲：无；
背景#393837；
-webkit外观：无；
}
.滑块：：-webkit滑块拇指{
宽度：8px；
高度：8px；
光标：指针；
外观：无；
背景：黑色；
边界半径：50%；
-webkit外观：无；
}
.滑块：：-moz范围拇指{
宽度：8px；
高度：8px；
边界：无；
光标：指针；
边界半径：50%；
背景：黑色；
}

通过使用“幻觉”元素假装是滑块的一部分，您可以实现您想要的效果

到目前为止，我还不太熟悉ReactJS，所以我用普通javascript编写了它，但它应该很容易转换为ReactJS代码

通过收听滑块上的更改和输入事件，您可以更新“幻觉”，使其变小或变大。
通过收听幻觉上的单击，可以使滑块具有更大的值，然后触发更改事件以更新幻觉的宽度

请注意，我在代码中使用了作用域引用。根据您的代码库，您可能希望创建这些类属性，或者在每次触发事件时重新获取它们

希望这能给你足够的灵感来找到一个解决方案

/**
*获取文档中的所有滑块。
*定义拇指在这里有多大。
*/
常量滑块大小=8；
from（document.querySelectorAll（'.slider'））
.forEach（函数（元素）{
/**参考我们的滑块错觉**/
让illusion=element.parentNode.querySelector（'.slider-illusion'）；
/**我们需要它来保存我们的状态，而不必在元素上查找它**/
让电流变宽；
/**我们的更改处理程序，用于更新薄滑块的宽度**/
让changeWidth=（e）=>{
/**获取输入元素的当前实际宽度**/
让width=parseInt（window.getComputedStyle（元素）.getPropertyValue（“width”）；
/**计算左偏移量**/
左=（（element.value-element.min）/（element.max-element.min））*（（宽度-滑块大小））+滑块大小*1.25；
/**设置适当的宽度**/
illusion.style.width=（宽度-左+滑块大小）+“px”；
/**更新输出位置**/
错觉.style.left=左+像素；
};
/**当在幻觉上注册单击时，我们需要更新
滑块中的值**/
让幻觉触发=（e）=>{
/**幻觉中点击了哪里**/
设offset=e.offsetX；
/**对于每一个变化，我们幻觉中的部分有多宽**/
let part=irlipsion.clientWidth/（element.max-element.value）；
/**计算需要添加到当前滑块值的值**/
让变化=数学四舍五入（偏移/部分）；
/**如果拇指后面有咔嗒声，则强制进行更改**/
如果（更改==0）{
变化=1；
}
/**更新滑块**/
element.value=parseInt（element.value）+变更；
/**触发更改通知并重新绘制幻觉**/
元素。dispatchEvent（新事件（“更改”）；
};
/**触发它一次，将所有内容更新到正确的位置**/
changeWidth（）；
/**将事件处理程序绑定到输入和更改事件以启用拇指的拖动**/
元素。addEventListener（'input'，changeWidth）；
元素。addEventListener（'change'，changeWidth）；
let forFun=（e）=>{
document.getElementById（element.name）.innerText=element.value；
};
元素。addEventListener（“输入”，仅供参考）；
元素。addEventListener（'change'，forFun）；
/**听幻觉上的点击事件**/
illusion.addEventListener（'click'，illusionTrigger）；
});
.slider容器{
位置：相对位置；
高度：10px；
宽度：100%；
溢出：隐藏；
}
.滑块错觉{
位置：绝对位置；
顶部：0px；
背景：白色；；
宽度：50%；
左：计算（50%+2倍）；
高度：10px；
光标：指针；
}
.滑块错觉.直线{
位置：绝对位置；
顶部：3px；
高度：2倍；
背景色：黑色；
宽度：100%；
}
.滑块{
/**
*绝对定位，确保两个元件对齐相同
*/
位置：绝对位置；
顶部：0px；
左：0px；
宽度：100%；
高度：5px；
大纲：无；
背景#393837；
-webkit外观：无；
}
.滑块：：-webkit滑块拇指{
宽度：8px；
高度：8px；
光标：指针；
外观：无；
背景：黑色；
边界半径：50%；
-webkit外观：无；
}
.滑块：：-moz范围拇指{
宽度：8px；
高度：8px；
边界：无；
光标：指针；
边界半径：50%；
背景：黑色；
}
选择您想要的杯子数量：3/5


选择您想要的球数：125/500


选择要玩的回合数：3/10
这是否回答了您的问题？一篇博客文章使用
和
@GrzegorzT解决了这个问题。不，它没有，因为它正在为输入范围的
宽度
使用硬编码值。@VinaySharma I