Skip to content

feat(material/slider): add customizable thumb dimensions for m2 and m3 #31439

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

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

feat(material/slider): add customizable thumb dimensions for m2 and m3 #31439

wants to merge 1 commit into from

Conversation

mistrykaran91
Copy link
Contributor

Fixes #31101

@mistrykaran91 mistrykaran91 requested a review from a team as a code owner June 25, 2025 13:58
@mistrykaran91 mistrykaran91 requested review from adolgachev and mmalerba and removed request for a team June 25, 2025 13:58
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: material/slider labels Jun 25, 2025
@mmalerba mmalerba requested review from wagnermaciel and removed request for mmalerba June 25, 2025 16:42
@wagnermaciel
Copy link
Contributor

I believe you would also need to add some logic to src/material/slider/slider-thumb.ts so that the ripple diameter is calculated based on the slider-thumb-width and slider-thumb-height

@mistrykaran91 mistrykaran91 force-pushed the feat/introduc-token-for-slider-dimensions branch from ac555fa to dba1885 Compare June 27, 2025 09:29
@mistrykaran91
Copy link
Contributor Author

I believe you would also need to add some logic to src/material/slider/slider-thumb.ts so that the ripple diameter is calculated based on the slider-thumb-width and slider-thumb-height

Thanks @wagnermaciel, I have created slider-thumb-diameter variable and used that for width and height and calculate the thumb ripple.

@mistrykaran91 mistrykaran91 force-pushed the feat/introduc-token-for-slider-dimensions branch from dba1885 to f8cab36 Compare June 27, 2025 09:40
wagnermaciel
wagnermaciel reviewed Jun 30, 2025
View reviewed changes
src/material/slider/slider-thumb.ts
@@ -117,7 +117,8 @@ export class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewIni
return;
}

this._ripple.radius = 24;
const thumbDiameter = this._hostElement.offsetHeight || 48;
this._ripple.radius = thumbDiameter / 2;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should add a token for this and default to computing this based on the slider thumb width/height (whichever is greater).

Copy link
Contributor Author

@mistrykaran91 mistrykaran91 Jul 1, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm bit new to css things, not sure I got it completely. As, in adding new token for this radius ? Also, do we need to update slider-input.ts too ? Line 778 where ripplePadding is 48px ?

@mistrykaran91 mistrykaran91 force-pushed the feat/introduc-token-for-slider-dimensions branch from f8cab36 to 9019a0e Compare July 1, 2025 07:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adolgachev adolgachev Awaiting requested review from adolgachev adolgachev is a code owner automatically assigned from angular/components-googlers

@wagnermaciel wagnermaciel Awaiting requested review from wagnermaciel

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
area: material/slider detected: feature PR contains a feature commit
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

feat(slider): Introduce token for slider height
2 participants
@mistrykaran91 @wagnermaciel