Skip to content

[Range] Add * to slider-thumb and tick #1449

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

Open
brechtDR wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Range] Add * to slider-thumb and tick #1449

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 8 additions & 8 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 @@ -94,12 +94,12 @@ There currently is a running draft solution for this found at: [https://www.w3.o

- `::slider-track`: The main track along which the thumb(s) move.
- `::slider-fill`: The filled portion of the track, typically between the minimum value and the thumb (or between thumbs for multi-handle ranges).
- `::slider-thumb`: The draggable handle(s) used to select values.
- `::slider-thumb(*)`: The draggable handle(s) used to select values.

Taking this further, we would like to propose new pseudo elements following the same convention:

- `::slider-segment`: Sections of the track between handles in multi-handle ranges.
- `::slider-tick`: Optional tick marks along the track for value representation. (when datalist is paired.)
- `::slider-tick(*)`: Optional tick marks along the track for value representation. (when datalist is paired.)
- `::slider-tick-label`: Labels associated with tick marks. (when datalist is paired.)

This would follow the idea of the `appearance: base` value from the CSS Forms specification:
Expand Down Expand Up @@ -397,8 +397,8 @@ To address the current fragmentation and provide a unified styling API, we propo

- `::slider-track`: Represents the main track of the range group.
- `::slider-segment`: Represents sections of the track between handles.
- `::slider-thumb`: Represents the draggable handles within the group.
- `::slider-tick`: Represents individual tick marks on the range group with attached datalist.
- `::slider-thumb(*)`: Represents the draggable handles within the group.
- `::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.

Example usage:
Expand All @@ -418,7 +418,7 @@ input[type="range"]::slider-fill {
background-color: #4caf50;
}

input[type="range"]::slider-thumb {
input[type="range"]::slider-thumb(*) {
width: 20px;
height: 20px;
background-color: #2196f3;
Expand All @@ -442,7 +442,7 @@ rangegroup::slider-segment(2) {
background-color: #33ff57;
}

rangegroup input[type="range"]::slider-thumb {
rangegroup input[type="range"]::slider-thumb(*) {
width: 24px;
height: 24px;
background-color: #2196f3;
Expand Down Expand Up @@ -518,7 +518,7 @@ rangegroup::slider-segment(2) {
rangegroup::slider-segment(3) {
background-color: #ddd;
}
rangegroup input[type="range"]::slider-thumb {
rangegroup input[type="range"]::slider-thumb(*) {
width: 24px;
height: 24px;
background-color: #2196f3;
Expand Down Expand Up @@ -558,7 +558,7 @@ rangegroup::slider-track {
background-color: #ddd;
}

rangegroup input[type="range"]::slider-thumb {
rangegroup input[type="range"]::slider-thumb(*) {
width: 20px;
height: 20px;
background-color: #2196f3;
Expand Down