使用 jQuery/javascript 获取滑块拇指的绝对位置答案

【问题标题】：Get slider thumb absolute position with jQuery/javascript使用 jQuery/javascript 获取滑块拇指的绝对位置
【发布时间】：2013-01-24 04:43:17
【问题描述】：

我有一个input type=range 滑块，它代表视频的进度条。此滑块被包裹在一个较小的容器内，因此当滑块上的拇指到达容器边缘时，容器向左滚动到足以使拇指再次可见。因此，我需要检测何时发生这种情况。我不能使用视频的 timeupdate 事件，因为它在单击滑块后也会触发，但在这种情况下容器不应该滚动。我也不能使用 jQueryUI 滑块，因为它不如 HTML 滑块精确...

我想我需要找到一种方法来检测拇指像素的实际位置。不幸的是，这是一个影子 DOM 元素......有没有办法用 javascript/jquery 获得它？

更新：这是 Chrome 呈现 <input type=range> DOM 元素的方式，如开发者工具中所示：

<input type="range">
  #shadow-root
    <div>  --> This is the slider container
      <div>  --> This is the slider track
        <div></div>  --> This is the slider thumb
      </div>
      <div style="visibility: hidden; position: static;"></div>
    </div>
</input>

我想要做的是检测滑块拇指 div 的位置（绝对或相对）而不寻找它的值。

【问题讨论】：

为什么不能增加父容器的宽度？还有代码吗？
由于这种情况取决于您的实现，除非您提供一些代码，否则没有人可以真正帮助您。
嗯，我可能解释得很糟糕（对不起，但我的英语不是很完美^_^），我不是在寻找解决方法，我正在尝试做的事情并没有取决于我的实施。至少我不这么认为。无论如何我都会更新问题......

标签： javascript jquery html css shadow-dom

【解决方案1】：

你可以展示一些我不完全理解你想要做什么的代码......

使用 jQuery 尝试像这样绑定阴影元素：

$(document).on('change', 'input[type="range"]', function(e) {
    var left = $('#imgId').position().left,
        rangePosition = $(this).val();
});

【讨论】：