使用bootstrap跨越整個進度條的輸入範圍3

Question

我正在設計使用bootstrap 3組件的音頻播放器。我的問題是正在播放音頻的進度條。我想說明

1. 負載百分比，
2. 什麼已播放百分比，
3. 併爲用戶的光標尋求在音頻中的不同位置。

我組合了前兩個，但我無法添加遊標。我嘗試使用<input type="range">，但光標不跨越整個進度條。如何解決這個問題？

您可以在這裏http://www.bootply.com/126737

Answer 1

細看你可以通過使用position:absolute;顯示進度條的範圍內，輸入頂部。

看看這個例子：

http://jsbin.com/cefimoli/1/

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