html - 获取范围句柄的 x 和 y 位置

Question

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

有没有一种简单的方法来捕获手柄相对于窗口的 xy 位置？我已经阅读了许多关于此的问题，并且我认识到您可以找到相对于父容器的偏移量，但这似乎使问题过于复杂。

例如，我正在尝试这种方法：获取滑块左上角相对于页面的 xy 位置并相应地定位 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';

}

标签： htmlrange

Answer 1

是您要查找的代码吗？

let range = document.querySelector('.range input');
let hint = document.querySelector('.range span');

hint.style.top = range.offsetHeight + 'px';

var thumbnWidth = 8;

let offset = range.clientWidth / (parseInt(range.max) - parseInt(range.min));
let 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) * thumbnWidth) + 'px'; 
  
};

updatePosition();
range.addEventListener('input', updatePosition);

.range {
  position: relative; 
  margin: auto;
  padding-top: 50px;
}

.range span {
  position: absolute; 
  color: red; 
  border: 1px solid blue; 
}

.range input {
  margin: 0;
}

<div class="range">
  <span></span>
  <input type="range" max="1000" min="0"> 
</div>