feat(material/slider): add customizable thumb dimensions for m2 and m3 #31439
Conversation
mistrykaran91
requested review from
adolgachev and
mmalerba
and removed request for
a team
angular-robot
bot
added
detected: feature
|
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
force-pushed
the
feat/introduc-token-for-slider-dimensions
branch
from
ac555fa to
dba1885
Compare
Thanks @wagnermaciel, I have created |
mistrykaran91
force-pushed
the
feat/introduc-token-for-slider-dimensions
branch
from
dba1885 to
f8cab36
Compare
| @@ -175,8 +175,8 @@ $fallbacks: m3-slider.get-tokens(); | |||
| left: -24px; | |||
| outline: none; | |||
| position: absolute; | |||
| height: 48px; | |||
| width: 48px; | |||
| height: token-utils.slot(slider-thumb-diameter, $fallbacks); | |||
There was a problem hiding this comment.
These should use the --mat-slider-handle-width and --mat-slider-handle-height variables instead
There was a problem hiding this comment.
Ok, I introduce those two variables again, I was thinking in most of the cases they were the same so keeping it one variable only
| @@ -299,7 +299,7 @@ $fallbacks: m3-slider.get-tokens(); | |||
| outline: none; | |||
| vertical-align: middle; | |||
| cursor: pointer; | |||
| height: 48px; | |||
| height: token-utils.slot(slider-thumb-diameter, $fallbacks); | |||
There was a problem hiding this comment.
If you are changing the height of the .mat-mdc-slider, you will also need to change the height of the hidden .mdc-slider__input
| @@ -14,6 +14,7 @@ | |||
| slider-handle-height: 20px, | |||
| slider-handle-shape: 50%, | |||
| slider-handle-width: 20px, | |||
| slider-thumb-diameter: 48px, | |||
There was a problem hiding this comment.
Since we already have the slider-thumb-width and slider-thumb-height tokens for changing the shape of the slider thumb, we shouldn't need a slider-thumb-diameter token
| @@ -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; | |||
There was a problem hiding this comment.
We should add a token for this and default to computing this based on the slider thumb width/height (whichever is greater).
Fixes #31101