From 3bb1af63d3f6846766b723dc6aa571e337618205 Mon Sep 17 00:00:00 2001
From: Brecht De Ruyte <deruytebrecht@gmail.com>
Date: Tue, 7 Oct 2025 07:53:02 +0200
Subject: [PATCH 1/3] [Range] Change labelling to implicit labeling

---
 .../enhanced-range-input.explainer.mdx        | 76 ++++++++++---------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/site/src/pages/components/enhanced-range-input.explainer.mdx b/site/src/pages/components/enhanced-range-input.explainer.mdx
index 8405a3a1c..0ba8048fe 100644
--- a/site/src/pages/components/enhanced-range-input.explainer.mdx
+++ b/site/src/pages/components/enhanced-range-input.explainer.mdx
@@ -114,10 +114,12 @@ This approach offers several advantages:
 ```html
 <rangegroup>
   <legend>Temperature Range</legend>
-  <label for="temp-min">Minimum Temperature</label>
-  <input type="range" id="temp-min" name="temp-min" value="-25">
-  <label for="temp-max">Maximum Temperature</label>
-  <input type="range" id="temp-max" name="temp-max" value="15">
+  <label>Minimum Temperature
+    <input type="range" name="temp-min" value="-25">
+  </label>
+  <label>Maximum Temperature
+    <input type="range" name="temp-max" value="15">
+  </label>
 </rangegroup>
 ```
 
@@ -136,12 +138,7 @@ A robust labeling strategy is crucial for users of assistive technologies. We pr
 
 **Group Label:** The `<rangegroup>` element should be labeled by including a `<legend>` element as a direct child. This provides the accessible name for the entire group of sliders.
 
-**Individual Handle Labels:** Each `<input type="range">` within the group should have its own accessible name. This can be provided using standard methods, in the following order of preference:
-
-1.  A `<label>` element associated with the input's `id`.
-2.  An `aria-label` or `aria-labelledby` attribute on the `<input>`.
-
-If an explicit name is not provided, browsers could offer a localized default for common two-handle scenarios (e.g., "minimum" and "maximum"). However, authors should always provide explicit, descriptive labels for clarity, especially when more than two handles are present.
+**Individual Handle Labels:** Each `<input type="range">` within the group should have its own accessible name. This can be provided by wrapping the `<input>` within a `<label>` element (implicit labeling), which is the recommended approach. Alternatively, standard methods like an `aria-label` or `aria-labelledby` attribute on the `<input>` can be used.
 
 #### Example Implementation
 
@@ -149,11 +146,13 @@ If an explicit name is not provided, browsers could offer a localized default fo
 <rangegroup>
   <legend>Price Range</legend>
 
-  <label for="price-min">Minimum Price</label>
-  <input type="range" id="price-min" name="price-min" value="25">
+  <label>Minimum Price
+    <input type="range" name="price-min" value="25">
+  </label>
 
-  <label for="price-max">Maximum Price</label>
-  <input type="range" id="price-max" name="price-max" value="75">
+  <label>Maximum Price
+    <input type="range" name="price-max" value="75">
+  </label>
 </rangegroup>
 ```
 
@@ -172,11 +171,13 @@ For example, consider a price range selector:
 <rangegroup>
   <legend>Price Range</legend>
 
-  <label for="price-min">Minimum Price</label>
-  <input type="range" id="price-min" name="price-min" value="100" min="0" max="1000">
+  <label>Minimum Price
+    <input type="range" name="price-min" value="100" min="0" max="1000">
+  </label>
 
-  <label for="price-max">Maximum Price</label>
-  <input type="range" id="price-max" name="price-max" value="750" min="0" max="1000">
+  <label>Maximum Price
+    <input type="range" name="price-max" value="750" min="0" max="1000">
+  </label>
 </rangegroup>
 ```
 
@@ -196,10 +197,12 @@ For `<rangegroup>` elements, the `<datalist>` can be associated with the group a
 ```html
 <rangegroup name="price-range" min="0" max="100" list="price-ticks">
     <legend>Price Range</legend>
-    <label for="price-min-datalist">Minimum Price</label>
-    <input type="range" id="price-min-datalist" name="price-min" min="0" max="50" value="20">
-    <label for="price-max-datalist">Maximum Price</label>
-    <input type="range" id="price-max-datalist" name="price-max" min="50" max="100" value="80">
+    <label>Minimum Price
+        <input type="range" name="price-min" min="0" max="50" value="20">
+    </label>
+    <label>Maximum Price
+        <input type="range" name="price-max" min="50" max="100" value="80">
+    </label>
 </rangegroup>
 <datalist id="price-ticks">
     <option value="0">$0</option>
@@ -384,10 +387,12 @@ console.log(rangeGroup.values); // [150, 750]
 ```html
  <rangegroup name="price-range" min="0" max="1000">
     <legend>Price Range</legend>
-    <label for="price-min-ex1">Minimum Price</label>
-    <input type="range" id="price-min-ex1" name="price-min" min="0" max="500" value="250" step="10">
-    <label for="price-max-ex1">Maximum Price</label>
-    <input type="range" id="price-max-ex1" name="price-max" min="500" max="1000" value="750" step="10">
+    <label>Minimum Price
+        <input type="range" name="price-min" min="0" max="500" value="250" step="10">
+    </label>
+    <label>Maximum Price
+        <input type="range" name="price-max" min="500" max="1000" value="750" step="10">
+    </label>
 </rangegroup>
 ```
 
@@ -426,12 +431,15 @@ rangegroup::slider-segment:nth-child(3) {
 ```html
 <rangegroup name="temperature-range" min="-100" max="100">
     <legend>Temperature Range</legend>
-    <label for="temp-low">Low</label>
-    <input type="range" id="temp-low" name="temp-low" min="-100" max="-25" value="-50">
-    <label for="temp-medium">Medium</label>
-    <input type="range" id="temp-medium" name="temp-medium" min="-25" max="25" value="0">
-    <label for="temp-high">High</label>
-    <input type="range" id="temp-high" name="temp-high" min="25" max="100" value="75">
+    <label>Low
+        <input type="range" name="temp-low" min="-100" max="-25" value="-50">
+    </label>
+    <label>Medium
+        <input type="range" name="temp-medium" min="-25" max="25" value="0">
+    </label>
+    <label>High
+        <input type="range" name="temp-high" min="25" max="100" value="75">
+    </label>
 </rangegroup>
 ```
 ```css
@@ -475,12 +483,10 @@ rangegroup::slider-segment:nth-child(4) {
 - Should there be a limit on the number of range inputs that can be included in a `<rangegroup>`? Based on discussions, we've decided not to impose a limit, leaving it to authors to determine the appropriate number for their use case. A separate issue will be created to address potential accessibility concerns with a large number of handles.
 - How should we handle thumb collision in multi-handle ranges?
 - What is the best way to handle keyboard navigation for multi-handle ranges? While tabbing between inputs is natural, should there be additional keyboard shortcuts for more efficient navigation?
-- Should we provide built-in support for non-linear scales (e.g., logarithmic)?
 - Should we consider additional pseudo-elements for more granular styling control?
 - How should we handle vertical orientation for range inputs? The CSS Forms specification introduces a slider-orientation property that could be adopted for this purpose.
-- How should we handle the positioning and spacing of tick marks when using `<datalist>` with `<rangegroup>` elements?
 - Should we provide options for automatic tick mark generation (e.g., evenly spaced) without requiring a `<datalist>`? These could be auto-generated based on a step attribute of a rangegroup
 - How can we ensure that tick marks and labels remain legible and usable on small-screen devices or with a large number of ticks? Is this author responsibility?
 - Should we provide a way to programmatically set segment colors with a JavaScript API?
 - What should the behavior be when a handle's value is updated programmatically to a value that would violate the constraints imposed by `stepbetween` or other range limits?
-- How should form submission work for `<rangegroup>` elements? Should they submit as a single value (comma-separated) or as multiple values with the same name?
+- How should form submission work for `<rangegroup>` elements? Should they submit as a single value (comma-separated) or as multiple values with the same name?
\ No newline at end of file

From f8a41efcb1b97bb5f1d7d5839126ae10e4fd4e39 Mon Sep 17 00:00:00 2001
From: Brecht De Ruyte <deruytebrecht@gmail.com>
Date: Thu, 9 Oct 2025 20:26:48 +0200
Subject: [PATCH 2/3] update pseudo elements

---
 .../enhanced-range-input.explainer.mdx        | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/site/src/pages/components/enhanced-range-input.explainer.mdx b/site/src/pages/components/enhanced-range-input.explainer.mdx
index 0ba8048fe..317790dae 100644
--- a/site/src/pages/components/enhanced-range-input.explainer.mdx
+++ b/site/src/pages/components/enhanced-range-input.explainer.mdx
@@ -221,17 +221,17 @@ Alternatively, datalist could be provided on each input as well. While these won
 To support different colors between handles in a `<rangegroup>`, we introduce the `::slider-segment` pseudo-element. This allows for granular control over the appearance of each segment in the range, enabling rich user interfaces such as budget allocators where each segment can represent a different category. Example usage:
 
 ```css
-rangegroup::slider-segment:nth-child(1) {
+rangegroup::slider-segment(1) {
     background-color: #FF5733;
 }
 
 /* Style the second segment (between the first and second handles) */
-rangegroup::slider-segment:nth-child(2) {
+rangegroup::slider-segment(2) {
     background-color: #33FF57;
 }
 
 /* Style the third segment (between the second handle and the end) */
-rangegroup::slider-segment:nth-child(3) {
+rangegroup::slider-segment(3) {
     background-color: #3357FF;
 }
 ```
@@ -297,7 +297,7 @@ To address the current fragmentation and provide a unified styling API, we propo
 - `::slider-tick`: Represents individual tick marks on the range group with attached datalist.
 - `::slider-tick-label`: Represents the label associated with each tick mark of a datalist option.
 
-These pseudo-elements can be used in combination with other CSS selectors, such as `:nth-child()`, to provide granular control over individual elements.
+
 
 Example usage:
 
@@ -332,11 +332,11 @@ rangegroup::slider-track {
     background-color: #f0f0f0;
 }
 
-rangegroup::slider-segment:nth-child(1) {
+rangegroup::slider-segment(1) {
     background-color: #FF5733;
 }
 
-rangegroup::slider-segment:nth-child(2) {
+rangegroup::slider-segment(2) {
     background-color: #33FF57;
 }
 
@@ -407,15 +407,15 @@ rangegroup::slider-track {
     background-color: #f0f0f0;
 }
 
-rangegroup::slider-segment:nth-child(1) {
+rangegroup::slider-segment(1) {
     background-color: #ddd;
 }
 
-rangegroup::slider-segment:nth-child(2) {
+rangegroup::slider-segment(2) {
     background-color: #4CAF50;
 }
 
-rangegroup::slider-segment:nth-child(3) {
+rangegroup::slider-segment(3) {
     background-color: #ddd;
 }
  rangegroup input[type="range"]::slider-thumb {
@@ -461,19 +461,19 @@ rangegroup input[type="range"]::slider-thumb {
     border-radius: 50%;
 }
 
-rangegroup::slider-segment:nth-child(1) {
+rangegroup::slider-segment(1) {
     background-color: #FF5733;
 }
 
-rangegroup::slider-segment:nth-child(2) {
+rangegroup::slider-segment(2) {
     background-color: #33FF57;
 }
 
-rangegroup::slider-segment:nth-child(3) {
+rangegroup::slider-segment(3) {
     background-color: #3357FF;
 }
 
-rangegroup::slider-segment:nth-child(4) {
+rangegroup::slider-segment(4) {
     background-color: #FF33A8;
 }
 ```

From 24c0d0bd93939c17ecf265e2f2c73c8c12615c7d Mon Sep 17 00:00:00 2001
From: Brecht De Ruyte <deruytebrecht@gmail.com>
Date: Thu, 9 Oct 2025 20:28:34 +0200
Subject: [PATCH 3/3] update text a bit for segments

---
 site/src/pages/components/enhanced-range-input.explainer.mdx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/components/enhanced-range-input.explainer.mdx b/site/src/pages/components/enhanced-range-input.explainer.mdx
index 317790dae..b793455e5 100644
--- a/site/src/pages/components/enhanced-range-input.explainer.mdx
+++ b/site/src/pages/components/enhanced-range-input.explainer.mdx
@@ -218,7 +218,9 @@ Alternatively, datalist could be provided on each input as well. While these won
 
 ## Multi-Color Range Segments
 
-To support different colors between handles in a `<rangegroup>`, we introduce the `::slider-segment` pseudo-element. This allows for granular control over the appearance of each segment in the range, enabling rich user interfaces such as budget allocators where each segment can represent a different category. Example usage:
+To support different colors between handles in a `<rangegroup>`, we introduce the `::slider-segment` pseudo-element. This allows for granular control over the appearance of each segment in the range, enabling rich user interfaces such as budget allocators where each segment can represent a different category.
+Segments get numbered based on their start and end positions with 1 being at the start (based on writing mode).
+Example usage:
 
 ```css
 rangegroup::slider-segment(1) {