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

我有一个

input type=range

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

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

更新：这是Chrome呈现

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>

#影子根
-->这是滑块容器
-->这是滑块轨迹
-->这是滑块拇指

---

我想做的是检测滑块thumb div的位置（绝对或相对），而不查找其值。

您可能会显示一些代码，但我不完全理解您试图执行的操作

使用jQuery尝试绑定shadow元素，如下所示：

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

---

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