Activate inactive slider on direct thumb interaction

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();
     });
 

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();
       });