From f2fc3f5ea5c9df297f553b161fc0d6e5fa6f4ba5 Mon Sep 17 00:00:00 2001
From: Albin Larsson <mail@albinlarsson.com>
Date: Sat, 12 May 2018 00:02:05 +0200
Subject: [PATCH] Fix the seek tooltip time difference from seek time

---
 src/js/controls.js                | 2 +-
 src/sass/components/progress.scss | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/js/controls.js b/src/js/controls.js
index ec64977e..5c7c592b 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -443,7 +443,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 => {
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index 7490ee17..60994f99 100644
--- a/src/sass/components/progress.scss
+++ b/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