Merge branch 'master' into develop

src/js/controls.js

@@ -539,7 +539,7 @@ const controls = {
 
         // Calculate percentage
         let percent = 0;
-        const clientRect = this.elements.inputs.seek.getBoundingClientRect();
+        const clientRect = this.elements.progress.getBoundingClientRect();
         const visible = `${this.config.classNames.tooltip}--visible`;
 
         const toggle = toggle => {

src/js/listeners.js

@@ -549,12 +549,30 @@ class Listeners {
             }
         });
 
+        // Set range input alternative "value", which matches the tooltip time (#954)
+        on(
+            this.player.elements.inputs.seek,
+            'mousedown mousemove',
+            event => {
+                const clientRect = this.player.elements.progress.getBoundingClientRect();
+                const percent = 100 / clientRect.width * (event.pageX - clientRect.left);
+                event.currentTarget.setAttribute('seekNext', percent);
+            }
+        );
+
         // Seek
         on(
             this.player.elements.inputs.seek,
             inputEvent,
             event => {
-                this.player.currentTime = event.target.value / event.target.max * this.player.duration;
+                const seek = event.currentTarget;
+                // If it exists, use seekNext instead of "value" for consistency with tooltip time (#954)
+                let seekTo = seek.getAttribute('seekNext');
+                if (utils.is.empty(seekTo)) {
+                    seekTo = seek.value;
+                }
+                seek.removeAttribute('seekNext');
+                this.player.currentTime = seekTo / seek.max * this.player.duration;
             },
             'seek',
         );

src/sass/components/progress.scss

@@ -6,10 +6,15 @@
     display: flex;
     flex: 1;
     position: relative;
+    margin-right: $plyr-range-thumb-height;
+    left: $plyr-range-thumb-height / 2;
 
     input[type='range'] {
         position: relative;
         z-index: 2;
+        // Offset the range thumb in order to be able to calculate the relative progress (#954)
+        width: calc(100% + #{$plyr-range-thumb-height}) !important;
+        margin: 0 -#{$plyr-range-thumb-height / 2} !important;
     }
 
     // Seek tooltip to show time