From 04a80804cbb8cc349490c3fb2f7888230f7c2a66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 19 May 2026 16:32:20 +0200
Subject: [PATCH] Activate inactive slider on direct thumb interaction

---
 components/interactive-elements.html   | 8 +++++++-
 patterns/multiselektions-pulldown.html | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 8c5828b..84ec904 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -663,7 +663,7 @@
         valueOutput.textContent = value.toFixed(1);
       };
 
-      slider.addEventListener('input', () => {
+      const activateSliderRow = () => {
         if (row.dataset.activatable === 'true' && row.dataset.componentState === 'inactive-selectable') {
           row.dataset.componentState = 'active';
           row.classList.remove('sg-slider-row--inactive-selectable');
@@ -673,9 +673,15 @@
             removeButton.hidden = false;
           }
         }
+      };
 
+      slider.addEventListener('input', () => {
+        activateSliderRow();
         updateSliderState();
       });
+
+      slider.addEventListener('pointerdown', activateSliderRow);
+      slider.addEventListener('click', activateSliderRow);
       updateSliderState();
     });
 
diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html
index 23a0d44..d82dbb9 100644
--- a/patterns/multiselektions-pulldown.html
+++ b/patterns/multiselektions-pulldown.html
@@ -280,7 +280,7 @@
           valueOutput.textContent = value.toFixed(1);
         };
 
-        slider.addEventListener('input', () => {
+        const activateSliderRow = () => {
           if (row.dataset.activatable === 'true' && row.dataset.componentState === 'inactive-selectable') {
             row.dataset.componentState = 'active';
             row.classList.remove('sg-slider-row--inactive-selectable');
@@ -290,10 +290,16 @@
               removeButton.hidden = false;
             }
           }
+        };
 
+        slider.addEventListener('input', () => {
+          activateSliderRow();
           updateSliderState();
         });
 
+        slider.addEventListener('pointerdown', activateSliderRow);
+        slider.addEventListener('click', activateSliderRow);
+
         updateSliderState();
       });