diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index ab5850b..6774886 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -512,8 +512,8 @@
-
Variante aktivierbar: inaktiv
-
-
-
-
Variante aktivierbar: aktiv
-
- Wert
-
-
-
+
@@ -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) => {