Question

我正在使用bootstrap 3组件设计音频播放器。我的问题是正在播放的音频的进度条。我想要展示

加载百分比，
播放的百分比，
和一个光标，供用户在音频中寻找不同的位置。

我成功地合并了前两个，但我无法添加光标。我尝试使用<input type="range">但光标不会跨越整个进度条。怎么解决这个问题？

您可以在此处仔细查看http://www.bootply.com/126737

Answer 1

您可以使用position:absolute;显示进度条的范围输入顶部。

见这个例子：

<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>

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

1 个答案: