diff --git a/src/dialogs/more-info/components/cover/ha-more-info-cover-tilt-position.ts b/src/dialogs/more-info/components/cover/ha-more-info-cover-tilt-position.ts
index b9b52d65de..f9ddde6b9d 100644
--- a/src/dialogs/more-info/components/cover/ha-more-info-cover-tilt-position.ts
+++ b/src/dialogs/more-info/components/cover/ha-more-info-cover-tilt-position.ts
@@ -91,6 +91,7 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
         )}
         style=${styleMap({
           "--control-slider-color": color,
+          "--control-slider-background": color,
         })}
         .disabled=${isUnavailable}
       >
@@ -110,8 +111,8 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
         --control-slider-thickness: 100px;
         --control-slider-border-radius: 24px;
         --control-slider-color: var(--primary-color);
+        --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;
-        --control-slider-background: var(--control-slider-color);
       }
       .gradient {
         background: -webkit-linear-gradient(top, ${GRADIENT});
diff --git a/src/dialogs/more-info/components/fan/ha-more-info-fan-speed.ts b/src/dialogs/more-info/components/fan/ha-more-info-fan-speed.ts
index 41fead80cf..d40e88816e 100644
--- a/src/dialogs/more-info/components/fan/ha-more-info-fan-speed.ts
+++ b/src/dialogs/more-info/components/fan/ha-more-info-fan-speed.ts
@@ -110,6 +110,7 @@ export class HaMoreInfoFanSpeed extends LitElement {
           )}
           style=${styleMap({
             "--control-select-color": color,
+            "--control-select-background": color,
           })}
           .disabled=${this.stateObj.state === UNAVAILABLE}
         >
@@ -133,6 +134,7 @@ export class HaMoreInfoFanSpeed extends LitElement {
         )}
         style=${styleMap({
           "--control-slider-color": color,
+          "--control-slider-background": color,
         })}
         .disabled=${this.stateObj.state === UNAVAILABLE}
       >
diff --git a/src/dialogs/more-info/components/lights/ha-more-info-light-brightness.ts b/src/dialogs/more-info/components/lights/ha-more-info-light-brightness.ts
index 5e7816e136..8798250214 100644
--- a/src/dialogs/more-info/components/lights/ha-more-info-light-brightness.ts
+++ b/src/dialogs/more-info/components/lights/ha-more-info-light-brightness.ts
@@ -74,6 +74,7 @@ export class HaMoreInfoLightBrightness extends LitElement {
         )}
         style=${styleMap({
           "--control-slider-color": color,
+          "--control-slider-background": color,
         })}
         .disabled=${this.stateObj.state === UNAVAILABLE}
       >