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