Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[Range] Change labelling to implicit labeling #1299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 10, 2025
Merged

[Range] Change labelling to implicit labeling #1299

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3bb1af6
[Range] Change labelling to implicit labeling
brechtDR Oct 7, 2025
f8a41ef
update pseudo elements
brechtDR Oct 9, 2025
24c0d0b
update text a bit for segments
brechtDR Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 57 additions & 49 deletions site/src/pages/components/enhanced-range-input.explainer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```

Expand All @@ -136,24 +138,21 @@ 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

```html
<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>
```

Expand All @@ -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>
```

Expand All @@ -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>
Expand All @@ -215,20 +218,22 @@ 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: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;
}
```
Expand Down Expand Up @@ -294,7 +299,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:

Expand Down Expand Up @@ -329,11 +334,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;
}

Expand Down Expand Up @@ -384,10 +389,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>
```

Expand All @@ -402,15 +409,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 {
Expand All @@ -426,12 +433,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
Expand All @@ -453,19 +463,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;
}
```
Expand All @@ -475,12 +485,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?