Html 获取范围控制柄的x和y位置

我需要跟随系列的范围句柄作为滑块，如图所示，带有一个小div，文本如下所示：

是否有一种简单的方法可以捕捉把手相对于窗口的xy位置？我已经阅读了很多关于这方面的问题，我认识到你可以找到相对于父容器的偏移量，但这似乎过于复杂了

例如，我正在尝试这种方法：获取滑块左上角相对于页面的x-y位置，并相应地定位div。此方法可能有效，但设置style.left和style.top是相对于窗口而不是页面的（仍在使用）。有什么想法吗

function displayText(e) {
    var sliderValue=e.value;
    
    var sliderX = e.getBoundingClientRect().left; 
    var sliderY = e.getBoundingClientRect().top; 
    
    sliderX = sliderX + distance to handle (calculated from sliderValue)

    document.getElementById('sliderText').style.left = sliderX + 'px';
    document.getElementById('sliderText').style.top = sliderY + 'px';

}

---

您要找的是代码吗

let range=document.querySelector（'.range-input'）；
let hint=document.querySelector（'.range span'）；
hint.style.top=range.offsetHeight+'px'；
var thumbnWidth=8；
让offset=range.clientWidth/（parseInt（range.max）-parseInt（range.min））；
让updatePosition=（）=>{
hint.innerHTML=range.value；
hint.style.left=（（range.valueAsNumber-parseInt（range.min））*offset-hint.offsetWidth/2-（range.valueAsNumber/parseInt（range.max）-parseInt（range.min）-0.5）*thumbwidth）+'px'；
};
updatePosition（）；
range.addEventListener（'input'，updatePosition）
.range{
位置：相对位置；
保证金：自动；
填充顶部：50px；
}
.范围跨度{
位置：绝对位置；
颜色：红色；
边框：1px纯蓝色；
}
.量程输入{
保证金：0；
}

您能提供一些示例代码吗please@StrayAnt我做了一个编辑，让你了解我目前的想法，但仍有一些问题需要解释。我也尝试过其他方法，比如跟随鼠标的x位置，这很有效，但如果鼠标移动到快的位置，就会出现问题。如果我知道如何引用滑块手柄（不仅仅是滑块），那么可能有一个简单的解决方案。谢谢你，但我不这么认为。首先，你会注意到“提示”并不完全位于手柄上方-太左在左边，然后太右在右边（我在SO中发现的一些问题中提到）。但主要的问题是我可能有1到15个，而不仅仅是一个，这让事情变得复杂了一点。我没有添加拇指宽度，因为您正在寻找“简单方式”。我在答案中更新了我的代码。谢谢-非常有帮助，感谢您为此投入的时间。