JavaScript：将输入范围行为链接到另一个元素

我正在从事一个项目，该项目涉及一个

控制

内部的

，以便

的

左
值与
中拇指的移动成比例匹配。也就是说，当拇指到达
的末端时，
必须到达
的末端，当拇指移动到开头时，
也必须到达
的末端。我尝试了很多方法，但都没有达到我想要的效果。我很确定有一个聪明而优雅的数学解决方案，但我不擅长。。。你们能帮帮我吗

如果可能的话，我想要一些纯JavaScript的东西

下面是一个使用简单JS的解决方案

我这样做是为了好玩，但考虑到这是一个代码请求，不是一个真正的问题。
概括福斯托的答案


var range=document.getElementById（'range'），
fake=document.getElementById（'fake-range'），
parent=false.parentElement；
函数renderFake（）{
var available=parent.clientWidth-false.offsetWidth，
比率=（range.value-range.min）/（range.max-range.min）；
fake.style.left=比率*可用+px'；
}
range.addEventListener（'input'，renderFake）；
addEventListener（'resize'，renderFake）
.wrap{
背景色：#99c；
高度：10px；
位置：相对位置；
}
#假靶场{
背景色：#000；
身高：100%；
左：0；
位置：绝对位置；
排名：0；
宽度：10px；
}
请在您的问题中包含您的（“”）代码，否则，如果链接的代码笔死亡、倒塌、重组或删除，这个问题变得毫无价值或毫无意义，那么它就没有意义了。是的，可能是重复的。
<input id="range" onchange="updateFakeRange(this.value);" type="range" min="0" max="196" value="0">

<div class="wrap">
  <span id="fake-range"></span>
</div>

var inputRange = document.getElementById("range");
var fakeRange = document.getElementById("fake-range");
function updateFakeRange(value) {
  value = value * 100 / 196;
  fakeRange.style.left = value + "%";
}