Javascript 将旧值添加为“；“鬼魂”；拇指指向<；输入类型="；“范围”&燃气轮机；滑块

我已经用一个特殊的工具设计了一个常规范围的滑块。我的目标是向基于MQTT的外部smarthome对象发送一个新值命令，并首先将旧值显示为某种类型的ghost thumb：

在smarthome系统确认新的价值后，泡沫将被消除——但这不是我目前的问题。我想将重影放置在滑块的背景和真实值拇指之间，目前看起来如下所示：

在这里您可以看到，下面是代码：

$（'#slider_1'）。数据（'last-mqtt-value'，0.5）；
$（“#滑块_1”）。在（'input'，function（）上{
//显示幻影滑块
$（“#slider_1_companion”）.css（'left'、'calc（+$（this.data（'last-mqtt-value'）/$（this.attr（'max'）+'*（100%-20px）））；
$（'#slider_1_companion'）.css（'display'，'block'）；
});
$（“#滑块_1”）。在（'change'，function（）上{
log（$（this.data（'last-mqtt-value'），$（this.val（））；
//模拟新的输入值
///*
设置超时（（）=>{
$（this.data（'last-mqtt-value'，$（this.val（））；
$（'#slider_1_companion'）.css（'display'，'none'）；
},5000);
// */
});
滑块{
-webkit外观：无；
宽度：100%；
高度：10px；
边界半径：5px；
背景：#ccc；
大纲：无；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：20px；
高度：20px；
边界半径：50%；
背景：#6c757d；
光标：指针；
z指数：5；
}
.滑块：：-moz范围拇指{
宽度：20px；
高度：20px；
边界半径：50%；
背景：#6c757d；
光标：指针；
z指数：5；
}
/*https://stackoverflow.com/a/46318225/1997890*/
.滑套{
位置：相对位置；
宽度：150px；
}
.滑球伴奏{
背景色：#ccc；
边界半径：50%；
宽度：20px；
高度：20px；
位置：绝对位置；
顶部：计算（100%-19px）；/*由于某些原因，这不是20px（拇指高度）*/
/*左：计算（百分比*（100%-20px））；/*通过jQuery动态添加此行*/
显示：无；
指针事件：无；/*点击浏览*/
}

<代码> > p>我会考虑滑块的<代码>框阴影>代码，可以用CSS变量调整，不需要额外的元素，你会得到预期的结果。

这里有一个想法：


$（'#slider_1'）。数据（'last-mqtt-value'，0.5）；
$（“#滑块_1”）。在（'input'，function（）上{
document.getElementById（'slider_1_wrapper'）.style.setProperty（“--c”，
（$（this.data（'last-mqtt-value'）-$（this.val（））*130+'px'）；
/*130=150-20=包装宽度-拇指宽度*/
});
$（“#滑块_1”）。在（'change'，function（）上{
log（$（this.data（'last-mqtt-value'），$（this.val（））；
//模拟新的输入值
///*
设置超时（（）=>{
$（this.data（'last-mqtt-value'，$（this.val（））；
document.getElementById（'slider_1_wrapper'）.style.setProperty（“--c”，0）；
},5000);
// */
});
滑块{
-webkit外观：无；
宽度：100%；
高度：10px；
边界半径：5px；
背景：#ccc；
大纲：无；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：20px；
高度：20px；
边界半径：50%；
背景：#6c757d；
光标：指针；
z指数：5；
框阴影：var（--c，0）0红色；
}
.滑块：：-moz范围拇指{
宽度：20px；
高度：20px；
边界半径：50%；
背景：#6c757d；
光标：指针；
z指数：5；
框阴影：var（--c，0）0红色；
}
.滑套{
宽度：150px；
}

um，我只是简单地将z-index:-1添加到slider companion类中。。。似乎有效。@GeorgeDaniel是的，因为它会将元素放在所有滑块的后面，并且因为我们有相同的颜色，所以它会有效，但是如果颜色不相同，则会有问题。。。所以从技术上讲，鬼魂不在中间，我明白了。那你就在上面加上一个叠加输入范围吧？我修复了你的js小提琴，让它可以按照你的要求工作。太棒了，我没有想过简单地使用方块阴影来达到这个目的。