diff options
| -rw-r--r-- | src/js/controls.js | 2 | ||||
| -rw-r--r-- | src/sass/components/progress.scss | 5 |
2 files changed, 6 insertions, 1 deletions
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 |