Css 使用bootstrap 3跨越整个进度条的输入范围

我正在设计一个使用Bootstrap3组件的音频播放器。我的问题是正在播放的音频的进度条。我想展示一下

装载百分比

已经播放的百分比

以及用于用户在音频中寻找不同位置的光标 我成功地合并了前两个，但无法添加光标。我试着使用

，但光标不能跨越整个进度条。如何解决这个问题

---

您可以在此处仔细查看

您可以使用

位置：绝对值显示进度条顶部的范围输入

请参见此示例：



完成40%
完成50%
您的示例本身就可以工作，但当我将其添加到我的网页时，它就不能工作了。也许有矛盾。我必须仔细检查我的网页。注意，包装器元素（class=“progress”）也已定位。
<div class="progress" style="position:relative;">
  <!-- player position is at 40% -->
  <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%;">
      <span class="sr-only">40% Complete</span>
  </div>
  <!-- loading is at 90% (90-40=50) -->
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
      <span class="sr-only">50% Complete</span>
  </div>
  <input min="0" max="100" step="0.1" value="40" type="range" style="position:absolute; top:1px">
</div>