diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html index 77e18e3..26ad618 100644 --- a/patterns/multiselektions-pulldown.html +++ b/patterns/multiselektions-pulldown.html @@ -36,7 +36,7 @@ Checkbox 1 - + aus @@ -46,18 +46,19 @@ Slider 1 6.5 - + aus @@ -67,18 +68,19 @@ Slider 2 9.5 - + aus @@ -88,18 +90,19 @@ Slider 3 5.0 - + aus @@ -109,13 +112,14 @@ Slider 4 6.5 @@ -124,7 +128,7 @@ Block 2 - + aus @@ -134,18 +138,19 @@ Slider 5 3.0 - + aus @@ -155,18 +160,19 @@ Slider 6 2.5 - + aus @@ -176,13 +182,14 @@ Slider 7 1.6 @@ -308,11 +315,11 @@ if (!slider) { return; } - sliderRow.dataset.componentState = 'active'; - sliderRow.classList.remove('sg-slider-row--inactive-selectable'); - slider.classList.add('sg-form-active'); - slider.classList.remove('sg-form-inactive-selectable'); - slider.disabled = false; + sliderRow.dataset.componentState = isActive ? 'active' : 'inactive-selectable'; + sliderRow.classList.toggle('sg-slider-row--inactive-selectable', !isActive); + slider.classList.toggle('sg-form-active', isActive); + slider.classList.toggle('sg-form-inactive-selectable', !isActive); + slider.disabled = !isActive; return; } @@ -424,6 +431,9 @@ }; slider.addEventListener('input', () => { + if (row.dataset.activatable === 'true' && row.dataset.componentState !== 'active') { + return; + } updateSliderState(); });