移动端用audio标签制作音频播放器进度条出现的问题？

Question

var percentage = (Audio.currentTime * 100 / Audio.duration) + '%';if (percentage == "NaN%") {
       percentage = 0 + '%';
    }var styles = {    "left": percentage
    };
$audio_progress.css(styles);

如果通过上边的代码实现进度条,那个红点（$audio_progress）在音频结束后（left：100%）会超过蓝色区域，我该对代码进行怎样的修改呢？

如果那个红点是可以用户滑动来实现任意时间段音频的播放，我该如何去实现这个功能呢？
毫无头绪，请各位前辈指点迷经？

Answer 1

<div style="width: 300px;height: 20px;background: blue;position: relative">&nbsp; &nbsp; <div style="width: 290px;height: 20px;background: blue;position: relative">&nbsp; &nbsp; &nbsp; &nbsp; <div style="position: absolute;left: 100%;top: 5px;width: 10px;height: 10px;background: yellow"></div>&nbsp; &nbsp; </div></div>这个方法不知道对你没有用滑块外面包两层，第二层的宽度是第一层宽度减去滑块的宽度