diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts
index 8bf5a098e51f..33a1fbb16d3f 100644
--- a/src/components/ha-slider.ts
+++ b/src/components/ha-slider.ts
@@ -15,6 +15,7 @@ export class HaSlider extends MdSlider {
     css`
       :host {
         --md-sys-color-primary: var(--primary-color);
+        --md-sys-color-on-primary: var(--text-primary-color);
         --md-sys-color-outline: var(--outline-color);
         --md-sys-color-on-surface: var(--primary-text-color);
         --md-slider-handle-width: 14px;