Make slider variant activatable with inactive start and shared remove behavior

components/interactive-elements.html

@@ -512,8 +512,8 @@
       </div>
 
       <div class="sg-state-example">
-        <p class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</p>
+        <p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
-        <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable">
+        <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
           <span class="sg-label">Wert</span>
           <input
             class="sg-interaction-element sg-slider sg-form-inactive-selectable"
@@ -525,24 +525,7 @@
             aria-label="Slider inaktiv auswählbar"
           >
           <output class="sg-slider-value sg-body" for="slider">2.0</output>
-        </label>
+          <button class="sg-pulldown-panel__remove" type="button" aria-label="Slider-Filter entfernen" data-slider-activate-remove hidden>×</button>
-      </div>
-
-      <div class="sg-state-example">
-        <p class="sg-state-example__label sg-table-label">Variante aktivierbar: aktiv</p>
-        <label class="sg-slider-row" data-component="slider" data-component-state="active">
-          <span class="sg-label">Wert</span>
-          <input
-            class="sg-interaction-element sg-slider sg-form-active"
-            type="range"
-            min="0"
-            max="10"
-            step="0.1"
-            value="6.5"
-            aria-label="Slider aktiv ausgewählt"
-          >
-          <output class="sg-slider-value sg-body" for="slider">6.5</output>
-          <button class="sg-pulldown-panel__remove" type="button" aria-label="Slider-Filter entfernen">×</button>
         </label>
       </div>
     </div>
@@ -663,6 +646,7 @@
     document.querySelectorAll('.sg-slider-row').forEach((row) => {
       const slider = row.querySelector('.sg-slider');
       const valueOutput = row.querySelector('.sg-slider-value');
+      const removeButton = row.querySelector('[data-slider-activate-remove]');
 
       if (!slider || !valueOutput) {
         return;
@@ -679,7 +663,19 @@
         valueOutput.textContent = value.toFixed(1);
       };
 
-      slider.addEventListener('input', updateSliderState);
+      slider.addEventListener('input', () => {
+        if (row.dataset.activatable === 'true' && row.dataset.componentState === 'inactive-selectable') {
+          row.dataset.componentState = 'active';
+          row.classList.remove('sg-slider-row--inactive-selectable');
+          slider.classList.remove('sg-form-inactive-selectable');
+          slider.classList.add('sg-form-active');
+          if (removeButton) {
+            removeButton.hidden = false;
+          }
+        }
+
+        updateSliderState();
+      });
       updateSliderState();
     });
 
@@ -955,6 +951,24 @@
       });
     });
 
+    document.querySelectorAll('[data-slider-activate-remove]').forEach((removeButton) => {
+      removeButton.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const row = removeButton.closest('.sg-slider-row[data-activatable="true"]');
+        const slider = row ? row.querySelector('.sg-slider') : null;
+
+        if (!row || !slider) {
+          return;
+        }
+
+        row.dataset.componentState = 'inactive-selectable';
+        row.classList.add('sg-slider-row--inactive-selectable');
+        slider.classList.remove('sg-form-active');
+        slider.classList.add('sg-form-inactive-selectable');
+        removeButton.hidden = true;
+      });
+    });
+
     // Filter rows inside the opened pulldown start as inactive preselected rows.
     // They are visually dimmed but remain operable; clicking or changing them activates the row.
     document.querySelectorAll('[data-pulldown-filter-row]').forEach((row) => {