diff --git a/src/controllers/playback/video/index.html b/src/controllers/playback/video/index.html
index 6651fc3da2..26407cf95e 100644
--- a/src/controllers/playback/video/index.html
+++ b/src/controllers/playback/video/index.html
@@ -13,11 +13,11 @@
             <div class="osdTextContainer osdSecondaryMediaInfo"></div>
 
             <div class="flex flex-direction-row align-items-center">
-                <div class="osdTextContainer startTimeText" style="margin: 0 .25em 0 0;"></div>
+                <div class="osdTextContainer startTimeText osdPositionText" style="margin: 0 .25em 0 0;"></div>
                 <div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;">
                     <input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
                 </div>
-                <div class="osdTextContainer endTimeText" style="margin: 0 0 0 .25em;"></div>
+                <div class="osdTextContainer endTimeText osdDurationText" style="margin: 0 0 0 .25em;"></div>
             </div>
 
             <div class="buttons focuscontainer-x">
@@ -46,8 +46,6 @@
                 </button>
 
                 <div class="osdTimeText">
-                    <span class="osdPositionText"></span>
-                    <span class="osdDurationText"></span>
                     <span class="endsAtText"></span>
                 </div>
 
diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js
index 492f4aeee9..e6d3cca473 100644
--- a/src/controllers/playback/video/index.js
+++ b/src/controllers/playback/video/index.js
@@ -760,7 +760,7 @@ import 'css!assets/css/videoosd';
                     }
 
                     if (runtimeTicks && positionTicks != null && currentRuntimeTicks && !enableProgressByTimeOfDay && currentItem.RunTimeTicks && currentItem.Type !== 'Recording') {
-                        endsAtText.innerHTML = '&nbsp;&nbsp;-&nbsp;&nbsp;' + mediaInfo.getEndsAtFromPosition(runtimeTicks, positionTicks, true);
+                        endsAtText.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;' + mediaInfo.getEndsAtFromPosition(runtimeTicks, positionTicks, true);
                     } else {
                         endsAtText.innerHTML = '';
                     }
@@ -770,8 +770,20 @@ import 'css!assets/css/videoosd';
                     nowPlayingPositionSlider.setBufferedRanges(bufferedRanges, runtimeTicks, positionTicks);
                 }
 
-                updateTimeText(nowPlayingPositionText, positionTicks);
-                updateTimeText(nowPlayingDurationText, runtimeTicks, true);
+                if (positionTicks >= 0) {
+                    updateTimeText(nowPlayingPositionText, positionTicks);
+                    nowPlayingPositionText.classList.remove('hide');
+                } else {
+                    nowPlayingPositionText.classList.add('hide');
+                }
+
+                const leftTicks = runtimeTicks - positionTicks;
+                if (leftTicks >= 0) {
+                    updateTimeText(nowPlayingDurationText, leftTicks);
+                    nowPlayingDurationText.classList.remove('hide');
+                } else {
+                    nowPlayingPositionText.classList.add('hide');
+                }
             }
         }
 
diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 01221b6cae..f7503d4fd5 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -157,7 +157,7 @@
 }
 
 .mdl-slider-background-flex {
-    background: #333;
+    background: rgba(255, 255, 255, 0.3);
     height: 0.2em;
     margin-top: -0.1em;
     width: 100%;
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 555394af0d..ded72b338d 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -442,7 +442,9 @@ import 'emby-input';
             position = (position / runtime) * 100;
         }
 
-        for (const range in ranges) {
+        for (let i = 0, length = ranges.length; i < length; i++) {
+            const range = ranges[i];
+
             if (position != null) {
                 if (position >= range.end) {
                     continue;