From 859ee98abb485487c779d80844c6639201e2a139 Mon Sep 17 00:00:00 2001
From: Jan-Philipp Benecke <jan-philipp@bnck.me>
Date: Sat, 4 Oct 2025 09:12:35 +0200
Subject: [PATCH] Add color tokens for slider thumb and indicator (#27295)

---
 gallery/src/pages/components/ha-slider.markdown | 2 ++
 src/components/ha-slider.ts                     | 9 ++++++++-
 src/resources/theme/color/color.globals.ts      | 3 ---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/gallery/src/pages/components/ha-slider.markdown b/gallery/src/pages/components/ha-slider.markdown
index 9de5ecd361..a4aeec6540 100644
--- a/gallery/src/pages/components/ha-slider.markdown
+++ b/gallery/src/pages/components/ha-slider.markdown
@@ -34,3 +34,5 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/slid
 **CSS Custom Properties**
 
 - `--ha-slider-track-size` - Height of the slider track. Defaults to `4px`.
+- `--ha-slider-thumb-color` - Color of the slider thumb. Defaults to `var(--primary-color)`.
+- `--ha-slider-indicator-color` - Color of the filled portion of the slider track. Defaults to `var(--primary-color)`.
diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts
index 4d2c107077..a96778edac 100644
--- a/src/components/ha-slider.ts
+++ b/src/components/ha-slider.ts
@@ -19,7 +19,6 @@ export class HaSlider extends Slider {
       Slider.styles,
       css`
         :host {
-          --wa-form-control-activated-color: var(--ha-control-color);
           --track-size: var(--ha-slider-track-size, 4px);
           --marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
           --marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
@@ -57,6 +56,7 @@ export class HaSlider extends Slider {
 
         #thumb {
           border: none;
+          background-color: var(--ha-slider-thumb-color, var(--primary-color));
         }
 
         #slider:focus-visible:not(.disabled) #thumb,
@@ -65,6 +65,13 @@ export class HaSlider extends Slider {
           outline: var(--wa-focus-ring);
         }
 
+        #indicator {
+          background-color: var(
+            --ha-slider-indicator-color,
+            var(--primary-color)
+          );
+        }
+
         :host([size="medium"]) {
           --thumb-width: 20px;
           --thumb-height: 20px;
diff --git a/src/resources/theme/color/color.globals.ts b/src/resources/theme/color/color.globals.ts
index 457aa9734a..07ee76bef6 100644
--- a/src/resources/theme/color/color.globals.ts
+++ b/src/resources/theme/color/color.globals.ts
@@ -288,9 +288,6 @@ export const colorStyles = css`
     --material-background-color: var(--card-background-color);
     --material-secondary-background-color: var(--secondary-background-color);
     --material-secondary-text-color: var(--secondary-text-color);
-
-    /* Color for Home Assistant input controls e.g. slider, radio buttons */
-    --ha-control-color: var(--primary-color);
   }
 `;