diff --git a/src/components/ha-labeled-slider.ts b/src/components/ha-labeled-slider.ts
index 8a54a14496..483d5aefd6 100644
--- a/src/components/ha-labeled-slider.ts
+++ b/src/components/ha-labeled-slider.ts
@@ -30,8 +30,9 @@ class HaLabeledSlider extends LitElement {
   @property({ type: Number }) public value?: number;
 
   protected render() {
+    const title = this._getTitle();
     return html`
-      <div class="title">${this._getTitle()}</div>
+      ${title ? html`<div class="title">${title}</div>` : nothing}
       <div class="extra-container"><slot name="extra"></slot></div>
       <div class="slider-container">
         ${this.icon ? html`<ha-icon icon=${this.icon}></ha-icon>` : nothing}
@@ -73,17 +74,20 @@ class HaLabeledSlider extends LitElement {
 
     .slider-container {
       display: flex;
+      align-items: center;
     }
 
     ha-icon {
-      margin-top: 8px;
       color: var(--secondary-text-color);
     }
 
     ha-slider {
+      display: flex;
       flex-grow: 1;
+      align-items: center;
       background-image: var(--ha-slider-background);
       border-radius: 4px;
+      height: 32px;
     }
   `;
 }