diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 9ef577a19e..833fd3e796 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -227,7 +227,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    transform: translate3d(-48%, -120%, 0);
+    transform: translate3d(-50%, -120%, 0);
     background: #282828;
     color: #fff;
     display: flex;
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 8f93799e67..44e9c63106 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -48,8 +48,13 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
     function updateBubble(range, value, bubble, bubbleText) {
 
         requestAnimationFrame(function () {
+            var bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
+            var bubbleRect = bubble.getBoundingClientRect();
 
-            bubble.style.left = value + '%';
+            var bubblePos = bubbleTrackRect.width * value / 100;
+            bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);
+
+            bubble.style.left = bubblePos + 'px';
 
             if (range.getBubbleHtml) {
                 value = range.getBubbleHtml(value);