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