Skip to content

Add support for ::slider-fill,::slider-track, and ::slider-thumb pseudo-elements#310

Merged
mrobinson merged 3 commits intoservo:mainfrom
BudiArb:slide-bar
Mar 30, 2026
Merged

Add support for ::slider-fill,::slider-track, and ::slider-thumb pseudo-elements#310
mrobinson merged 3 commits intoservo:mainfrom
BudiArb:slide-bar

Conversation

@BudiArb
Copy link
Copy Markdown
Contributor

@BudiArb BudiArb commented Feb 10, 2026

Added ::slider-track, ::slider-fill, ::slider-thumb pseudo-elements to be used in Servo.

Original PR: #276
Servo PR: servo/servo#41562

@Loirooriol
Copy link
Copy Markdown
Collaborator

I force-pushed main during an upgrade, can you rebase your changes?

@BudiArb
Copy link
Copy Markdown
Contributor Author

BudiArb commented Feb 13, 2026

I force-pushed main during an upgrade, can you rebase your changes?

Ok, rebase done. Please help review @Loirooriol

@yisibl
Copy link
Copy Markdown

yisibl commented Feb 26, 2026

The CSS Working Group just discussed [css-forms-1] Have 2 slider-fill pseudos? (upper vs lower slider fills), and agreed to the following:
RESOLVED: two pseudos called slider-fill-over and slider-fill-under
RESOLVED: keep slider fill as an alias for slider fill under

w3c/csswg-drafts#12419 (comment)

@xiaochengh
Copy link
Copy Markdown
Contributor

The CSS Working Group just discussed [css-forms-1] Have 2 slider-fill pseudos? (upper vs lower slider fills), and agreed to the following:
RESOLVED: two pseudos called slider-fill-over and slider-fill-under
RESOLVED: keep slider fill as an alias for slider fill under

w3c/csswg-drafts#12419 (comment)

@yisibl These are resolved but not added to the spec text yet, so there's nothing we can implement for at this time.

For this PR we are only going to support slider-fill. You may file an issue for adding support for slider-fill-over and slider-fill-under, so that they will be implemented in the future.

@mrobinson
Copy link
Copy Markdown
Member

I have rebased this.

@yisibl
Copy link
Copy Markdown

yisibl commented Mar 11, 2026

@xiaochengh Thank you for your reply. I got it.

@mrobinson mrobinson changed the title Implement Range Track/Progress/Thumb PseudoElement for <input type="range"> Implement Range Track/Progress/Thumb PseudoElement for <input type=range> Mar 11, 2026
@mrobinson mrobinson changed the title Implement Range Track/Progress/Thumb PseudoElement for <input type=range> Implement support for ::slider-fill,::slider-track, and ::slider-thumb pseudo-elements Mar 12, 2026
@mrobinson mrobinson changed the title Implement support for ::slider-fill,::slider-track, and ::slider-thumb pseudo-elements Add support for ::slider-fill,::slider-track, and ::slider-thumb pseudo-elements Mar 12, 2026
@mrobinson
Copy link
Copy Markdown
Member

Shouldn't these use the names from the CSS WG resolution: slider-fill-over and slider-fill-under?

@mrobinson
Copy link
Copy Markdown
Member

I'm also really not sure about exposing unspecified pseudo-elements to authors here. I think we should probably expose slider-fill and then just make the other two Servo-prefixed.

@Loirooriol
Copy link
Copy Markdown
Collaborator

I'm also really not sure about exposing unspecified pseudo-elements to authors here

They are only parsed if self.in_user_agent_stylesheet(), so it seems fine.

@stevennovaryo
Copy link
Copy Markdown
Contributor

I believe for now we are just following the current draft spec, slider-fill-over and slider-fill-under isn't there yet. https://drafts.csswg.org/css-forms-1/#slider-pseudos

rayguo17 and others added 3 commits March 27, 2026 16:05
Signed-off-by: Tin Tun Aung <tin.tun.aung1@huawei.com>
Signed-off-by: Budiman Arbenta <arbenta6@gmail.com>
Signed-off-by: Budiman Arbenta <arbenta6@gmail.com>
@mrobinson mrobinson enabled auto-merge March 30, 2026 11:17
@mrobinson mrobinson added this pull request to the merge queue Mar 30, 2026
Merged via the queue into servo:main with commit 8557228 Mar 30, 2026
5 checks passed
github-merge-queue bot pushed a commit to servo/servo that referenced this pull request Mar 30, 2026
Implement the layout of `<input type="range">`. Support automatically
calculating the position of thumb based on the current input value, and
the size of range-track and range-thumb. Added a
document.has_script_or_layout_blocker function to detect whether it is
possible to run box_area_query during bind_to_tree, add delay_task if
there are blocker.

Here are some of the fixes made in this PR:
1. Fixed the structure for input type range's pseudo elements.
2. Fixed the positioning of input type range's thumb based on current
value, width, and direction.
3. Allow input type range to stretch vertically in a bigger container.

Original PR: #41024
Stylo PR: servo/stylo#310

Testing: Some improvements in WPT tests, with a few regressions. This
change includes a Servo-specific appearance test to detect unexpected
changes to the look and feel of range widgets.
Fixes: #22728

---------

Signed-off-by: Budiman Arbenta <arbenta6@gmail.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: rayguo17 <tin.tun.aung1@huawei.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
github-merge-queue bot pushed a commit to servo/servo that referenced this pull request Mar 30, 2026
Implement the layout of `<input type="range">`. Support automatically
calculating the position of thumb based on the current input value, and
the size of range-track and range-thumb. Added a
document.has_script_or_layout_blocker function to detect whether it is
possible to run box_area_query during bind_to_tree, add delay_task if
there are blocker.

Here are some of the fixes made in this PR:
1. Fixed the structure for input type range's pseudo elements.
2. Fixed the positioning of input type range's thumb based on current
value, width, and direction.
3. Allow input type range to stretch vertically in a bigger container.

Original PR: #41024
Stylo PR: servo/stylo#310

Testing: Some improvements in WPT tests, with a few regressions. This
change includes a Servo-specific appearance test to detect unexpected
changes to the look and feel of range widgets.
Fixes: #22728

---------

Signed-off-by: Budiman Arbenta <arbenta6@gmail.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: rayguo17 <tin.tun.aung1@huawei.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants