Input type range slider thumb not moveable in Google Chrome

Question

I'm working on a web player for video and I've been testing it in Chrome (Version 63.0.3239.108 (Official Build) (64-bit)) and Firefox(52.5.2 (64-bit)). In Chrome whenever I move the slider for searching trough the video, it just jumps back to the current video play time instead of the time the user wants the video to play from.

Here is the function handling this part:

function vidSeek(){
    var seekto = vid.duration * (seekbar.value / 100);
    vid.currentTime = seekto;
}

This is working as expected in Firefox (however inside firefox there is a stiling problem where ther seems to be default styling overlaying the one I'm writing, but I don't think it has anything to do with it)

Here is the html for the controll bar containing the sliders:

<div id="playercontrolls">
    <button id="playpausebtn">Pause</button>
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1"> <!-- Seek bar doesn't work-->
    <span id="curtimetext" class="white-text"></span> / <span id="durtimetext" class="white-text"></span>
    <button id="mutebtn">Mute</button>
    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1"> <!-- Volume bar works-->
    <button id="fullscreenbtn">[]</button>
</div>

I've also made a volume slider which seems to be working in both Firefox and Chrome (except for the stiling issue in Firefox)

The code for that is:

function setvolume(){
    if(vid.muted && volumeslider.value != 0){
        vid.muted = false;
        mutebtn.innerHTML = "Mute";
    }
    vid.volume = volumeslider.value / 100;
}

Also I'm programmaticly changing the value of the seek bar so it follows the video time like this:

function seekTimeUpdate(){
    var nt = vid.currentTime * (100 / vid.duration);
    seekbar.value = nt;

    // update time text
    updateTime();
}

function updateTime(){
    var curmins = Math.floor(vid.currentTime / 60);
    var cursecs = Math.round(vid.currentTime - curmins * 60);
    var durmins = Math.floor(vid.duration / 60);
    var dursecs = Math.round(vid.duration - durmins * 60);

    if(cursecs < 10){ cursecs = "0"+cursecs;}
    if(dursecs < 10){ dursecs = "0"+dursecs;}
    if(durmins > 10)
        if(curmins < 10){ curmins = "0"+curmins;}

    curtimetext.innerHTML = curmins+":"+cursecs;
    durtimetext.innerHTML = durmins+":"+dursecs;
}

Again this works fine in both Firefox and Chrome.

CSS for the sliders:

input#seekslider {
    width: 90vh;
}

input#volumeslider {
    width: 20vh;
}

input[type='range'] {
    -webkit-appearance: none !important;
    background: #000;
    border: #666 1px solid;
    height: 6px;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: #FFF;
    height: 15px;
    width: 15px;
    border-radius: 75%;
    cursor:pointer;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

What might be the problem here? Does the styling have anything to do with it's behavior?

EDIT: Here is the full javascript code for the player as requested: https://pastebin.com/rM54vqqf

Also here is my HTML for the player part of the page:

<div id="playerContainer" class="container z-depth-1">
            <div class="d-flex justify-content-center">
                <video id="vid" autoplay>
                    <source src= "{% static '/TestVideos/'%}{{path}}" type="video/mp4"></source>
                </video>
            </div>
            <div id="playercontrolls">
                <button id="playpausebtn" class="nokit"><i class="fa fa-pause white-text" aria-hidden="true"></i></button>
                <span class="slider"><input id="seekslider" type="range" min="0" max="100" value="0" step="0.1">    </span>
                <span id="curtimetext" class="white-text"></span> / <span id="durtimetext" class="white-text"></span>
                <button id="mutebtn" class="nokit"><i class="fa fa-volume-up white-text" aria-hidden="true"></i></button>
                <span class="slider"><input id="volumeslider" type="range" min="0" max="100" value="100" step="1"></span>
                <button id="fullscreenbtn" class="nokit"><i class="fa fa-desktop white-text" aria-hidden="true"></i> </button>
            </div>
        </div> 

Something I've noticed is that whenever I play it in fullscreen the standard controlls act in the same way as my custom controlls (again only in chrome) I've tried to get rid of those custom controlls by doing:

::-webkit-media-controls {
  display:none !important;
}

::-webkit-media-controls-enclosure {
  display:none !important;
}

but this doesn't seem to work in full screen. Could there be a problem reguarding CSS that for some reason doesn't allow my javascript to work properly? In that case here is my CSS for the player: https://pastebin.com/FzFjMUPH

Answer 1

I seem to have got it (your jsfiddle helped a great deal). There is a conflict when the user is catching the slider and the video is itself moving it automatically according to the events set.

So, I tried out making use of some additional conditions to stop automatic interruptions with the slider when the user is operating it.

Two more variables have been added (var cursorCaught, onSeeking;, the last one is set in function vidSeek()) along with two more mouse events (function catchCursor() for mousedown and function freeCursor() for mouseup) for seekslider to set the variables. Finally, there is also a new condition to check in function seekTimeUpdate() before making actions: if (!cursorCaught || onSeeking) { ... }.

Have a look at this jsfiddle: https://jsfiddle.net/1y86r593/2/

Perhaps, there might be some side effects because of these new conditions, but the idea should be clear.