diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts
index c3fb87005b20..5ea8d50b3321 100644
--- a/src/components/ha-slider.ts
+++ b/src/components/ha-slider.ts
@@ -11,6 +11,7 @@ export class HaSlider extends MdSlider {
       :host {
         --md-sys-color-primary: var(--primary-color);
         --md-sys-color-outline: var(--outline-color);
+        --md-sys-color-on-surface: var(--primary-text-color);
         --md-slider-handle-width: 14px;
         --md-slider-handle-height: 14px;
         min-width: 100px;