diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss
index 51f1688f6b..7e9acefa06 100644
--- a/res/css/views/elements/_Slider.scss
+++ b/res/css/views/elements/_Slider.scss
@@ -33,7 +33,7 @@ limitations under the License.
     position: absolute;
     height: 1rem;
     width: 100%;
-    padding: 0 1.1rem;
+    padding: 0 0.5rem; // half the width of a dot.
     align-items: center;
 }
 
@@ -45,7 +45,7 @@ limitations under the License.
 .mx_Slider_selection {
     display: flex;
     align-items: center;
-    width: calc(100% - 2.2rem);
+    width: calc(100% - 1rem); // 2 * half the width of a dot
     height: 1rem;
     position: absolute;
 }
@@ -87,3 +87,15 @@ limitations under the License.
     align-items: center;
     color: $Slider-background-color;
 }
+
+// The following is a hack to center the labels without adding
+// any width to the slider's dots.
+.mx_Slider_labelContainer {
+    width: 1rem;
+}
+
+.mx_Slider_label {
+    position: relative;
+    width: fit-content;
+    left: -50%;
+}
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index 7862373c1c..e341eea317 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -87,9 +87,11 @@ class Dot extends React.Component<DotIProps> {
 
         return <span onClick={this.props.onClick} className="mx_Slider_dotValue">
             <div className={className} />
-            <div>
+            <div className="mx_Slider_labelContainer">
+                <div className="mx_Slider_label">
                 {this.props.label}
             </div>
+            </div>
         </span>;
     }
 }