Show range slider above Bootstrap progress bar (in navbar)

Question

I'm currently trying to make a music player for my new website (using video.js). Everything works okay, except for the position slider. At first it may seem okay, but once the progress bar moves, it overlaps the slider. Let me explain how I've got everything set up:

Using Bootstrap 3, I've got a bottom navbar with a custom UI for video.js. There's a progress bar there to show how much of the track has already played, and there should be an invisible range slider to change the current position of the track on top, but here's where the problem comes in.

I've tried placing the slider everywhere, I've tried using "position: absolute", but still nothing. Here's my code: (if you want to see everything live, go here)

HTML:

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a id="nowplaying_titleartist" class="navbar-brand" style="padding: 15px;">Frenssu - Damare (Baq5 Remix)</a>
        </div>
        <div class="btn-group pull-left">
            <button class="btn btn-primary btn-xs navbar-btn" id="playButton" onclick="player.play();"><span class="glyphicon glyphicon-play" style="color: #fff;"></span></button>
            <button class="btn btn-primary btn-xs navbar-btn" id="pauseButton" onclick="player.pause();"><span class="glyphicon glyphicon-pause" style="color: #fff;"></span></button>
        <button class="btn btn-primary btn-xs navbar-btn" id="stopButton" onclick="player.pause(); player.currentTime(0);"><span class="glyphicon glyphicon-stop" style="color: #fff;"></span></button>
        </div>
        <div class="nav navbar-text progress progress-striped" style="width: 45%; margin: 15px; margin-left: 5px;">
            <div id="seekbar" class="progress-bar progress-bar-info"></div>
            <input id="position" type="range" min="0" max="100" value="0" onchange="updatePosition(this.value);" style="width: 100%; height: 50; opacity: 0.5; height: 100%;" />
        </div>
        <p class="nav navbar-text label label-primary" id="currentTime" style="padding: 6px; margin-top: 15px; margin-left: -15px;">00:00</p>
        <div class="nav navbar-text" style="margin: 0px; padding-top: 15px; margin-left: -10px;">
            <input id="volume" type="range" min="0" max="100" value="100" onchange="updateVolume(this.value);" style="width: 100px; margin: 0px; padding: 0px;" />
        </div>
    </div>
</div>

CSS (for range slider):

input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    width: 200px;
    height: 22px;
    margin: 0px;
    padding: 0px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #666;
    opacity: 0.5;
    width: 10px;
    height: 22px;
    margin: 0px;
    padding: 0px;
}

Javascript:

var player = videojs('test');
player.hide();
player.src({ type: "audio/mp3", src: "/mure/uploads/test.mp3" });

function updateVolume(volume){
    var player = videojs('test');
    player.volume(volume / 100);
}

function updatePosition(position){
    var player = videojs('test');
    player.currentTime(position / 100 * player.duration());
}

player.on("timeupdate",function(){
    var player = videojs('test');
    var progressbar = document.getElementById('seekbar');
    progressbar.style.width = (player.currentTime() / player.duration() * 100) + "%";
    var currentTimeLabel = document.getElementById('currentTime');
    currentTimeLabel.innerHTML = intToTime(Math.round(player.currentTime()));

    if (player.currentTime() == 0){
        document.getElementById("pauseButton").className = document.getElementById("pauseButton").className.replace( /(?:^|\s)active(?!\S)/g , '' );
}
});

player.on("play", function(){
    document.getElementById("pauseButton").className = document.getElementById("pauseButton").className.replace( /(?:^|\s)active(?!\S)/g , '' );
    document.getElementById('playButton').className += ' active';
});

player.on("pause", function(){
    document.getElementById("playButton").className = document.getElementById("playButton").className.replace( /(?:^|\s)active(?!\S)/g , '' );
    if (player.currentTime() != 0){
        document.getElementById('pauseButton').className += ' active';
    }
});

function intToTime(integer) {
    var sec_num = parseInt(integer, 10);
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    var time    = minutes+':'+seconds;
    return time;
}

Answer 1

This is what CSS changes I made to get it to work, seems responsive as well.

.nav.progress {
  position: relative;
}

#position {
  position: absolute;
  margin-top: -2px;
  left: 0;
}

Answer 2

You could try to change the position via CSS.

#position{
    position: relative;
    top: -15px;
}