From 5f29ce4641b912d49589a05a276220ccd48becf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 19 May 2026 15:52:36 +0200
Subject: [PATCH] Rebuild multiselect pulldown sliders from current slider
 component markup

---
 patterns/multiselektions-pulldown.html | 84 +++++++++++++++++++++-----
 1 file changed, 70 insertions(+), 14 deletions(-)

diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html
index f9aaecc..ed19811 100644
--- a/patterns/multiselektions-pulldown.html
+++ b/patterns/multiselektions-pulldown.html
@@ -39,29 +39,61 @@
 
                     <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">Slider 1</span>
-                      <input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="6.5" aria-label="Slider 1 von 1 bis 10">
-                      <output class="sg-slider-value sg-body" for="slider-1">6.5</output>
+                      <input
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
+                        type="range"
+                        min="1"
+                        max="10"
+                        step="0.1"
+                        value="6.5"
+                        aria-label="Slider 1 von 1 bis 10"
+                      >
+                      <output class="sg-slider-value sg-body" for="slider">6.5</output>
                       <button class="sg-activatable-remove" type="button" aria-label="Slider 1 entfernen" data-slider-activate-remove hidden>×</button>
                     </label>
 
                     <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">Slider 2</span>
-                      <input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="9.5" aria-label="Slider 2 von 1 bis 10">
-                      <output class="sg-slider-value sg-body" for="slider-2">9.5</output>
+                      <input
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
+                        type="range"
+                        min="1"
+                        max="10"
+                        step="0.1"
+                        value="9.5"
+                        aria-label="Slider 2 von 1 bis 10"
+                      >
+                      <output class="sg-slider-value sg-body" for="slider">9.5</output>
                       <button class="sg-activatable-remove" type="button" aria-label="Slider 2 entfernen" data-slider-activate-remove hidden>×</button>
                     </label>
 
                     <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">Slider 3</span>
-                      <input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="5.0" aria-label="Slider 3 von 1 bis 10">
-                      <output class="sg-slider-value sg-body" for="slider-3">5.0</output>
+                      <input
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
+                        type="range"
+                        min="1"
+                        max="10"
+                        step="0.1"
+                        value="5.0"
+                        aria-label="Slider 3 von 1 bis 10"
+                      >
+                      <output class="sg-slider-value sg-body" for="slider">5.0</output>
                       <button class="sg-activatable-remove" type="button" aria-label="Slider 3 entfernen" data-slider-activate-remove hidden>×</button>
                     </label>
 
                     <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">Slider 4</span>
-                      <input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="6.5" aria-label="Slider 4 von 1 bis 10">
-                      <output class="sg-slider-value sg-body" for="slider-4">6.5</output>
+                      <input
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
+                        type="range"
+                        min="1"
+                        max="10"
+                        step="0.1"
+                        value="6.5"
+                        aria-label="Slider 4 von 1 bis 10"
+                      >
+                      <output class="sg-slider-value sg-body" for="slider">6.5</output>
                       <button class="sg-activatable-remove" type="button" aria-label="Slider 4 entfernen" data-slider-activate-remove hidden>×</button>
                     </label>
                   </section>
@@ -71,22 +103,46 @@
 
                     <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">Slider 5</span>
-                      <input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="3.0" aria-label="Slider 5 von 1 bis 10">
-                      <output class="sg-slider-value sg-body" for="slider-5">3.0</output>
+                      <input
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
+                        type="range"
+                        min="1"
+                        max="10"
+                        step="0.1"
+                        value="3.0"
+                        aria-label="Slider 5 von 1 bis 10"
+                      >
+                      <output class="sg-slider-value sg-body" for="slider">3.0</output>
                       <button class="sg-activatable-remove" type="button" aria-label="Slider 5 entfernen" data-slider-activate-remove hidden>×</button>
                     </label>
 
                     <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">Slider 6</span>
-                      <input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="2.5" aria-label="Slider 6 von 1 bis 10">
-                      <output class="sg-slider-value sg-body" for="slider-6">2.5</output>
+                      <input
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
+                        type="range"
+                        min="1"
+                        max="10"
+                        step="0.1"
+                        value="2.5"
+                        aria-label="Slider 6 von 1 bis 10"
+                      >
+                      <output class="sg-slider-value sg-body" for="slider">2.5</output>
                       <button class="sg-activatable-remove" type="button" aria-label="Slider 6 entfernen" data-slider-activate-remove hidden>×</button>
                     </label>
 
                     <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">Slider 7</span>
-                      <input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="1.6" aria-label="Slider 7 von 1 bis 10">
-                      <output class="sg-slider-value sg-body" for="slider-7">1.6</output>
+                      <input
+                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
+                        type="range"
+                        min="1"
+                        max="10"
+                        step="0.1"
+                        value="1.6"
+                        aria-label="Slider 7 von 1 bis 10"
+                      >
+                      <output class="sg-slider-value sg-body" for="slider">1.6</output>
                       <button class="sg-activatable-remove" type="button" aria-label="Slider 7 entfernen" data-slider-activate-remove hidden>×</button>
                     </label>
                   </section>