diff --git a/src/material/slider/_m2-slider.scss b/src/material/slider/_m2-slider.scss index bdb16a22ed1b..b019c3b35b5c 100644 --- a/src/material/slider/_m2-slider.scss +++ b/src/material/slider/_m2-slider.scss @@ -14,6 +14,8 @@ slider-handle-height: 20px, slider-handle-shape: 50%, slider-handle-width: 20px, + slider-thumb-width: 48px, + slider-thumb-height: 48px, slider-inactive-track-height: 4px, slider-inactive-track-shape: 9999px, slider-value-indicator-border-radius: 4px, diff --git a/src/material/slider/_m3-slider.scss b/src/material/slider/_m3-slider.scss index 5bb89b21e8d7..e9cba838c9e7 100644 --- a/src/material/slider/_m3-slider.scss +++ b/src/material/slider/_m3-slider.scss @@ -24,6 +24,8 @@ slider-active-track-height: 4px, slider-handle-height: 20px, slider-handle-width: 20px, + slider-thumb-width: 48px, + slider-thumb-height: 48px, slider-inactive-track-height: 4px, slider-with-overlap-handle-outline-width: 1px, slider-with-tick-marks-active-container-opacity: 0.38, diff --git a/src/material/slider/slider-thumb.ts b/src/material/slider/slider-thumb.ts index 13f8ac1375fd..6643e165f45c 100644 --- a/src/material/slider/slider-thumb.ts +++ b/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; this._sliderInput = sliderInput; this._sliderInputEl = this._sliderInput._hostElement; diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss index 6f2888d041e6..5b13b4b64876 100644 --- a/src/material/slider/slider.scss +++ b/src/material/slider/slider.scss @@ -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-height, $fallbacks); + width: token-utils.slot(slider-thumb-width, $fallbacks); pointer-events: none; .mdc-slider--discrete & { @@ -299,7 +299,7 @@ $fallbacks: m3-slider.get-tokens(); outline: none; vertical-align: middle; cursor: pointer; - height: 48px; + height: token-utils.slot(slider-thumb-height, $fallbacks); margin: 0 $mat-slider-horizontal-margin; position: relative; touch-action: pan-y; @@ -319,6 +319,10 @@ $fallbacks: m3-slider.get-tokens(); } } + &[hidden] { + height: token-utils.slot(slider-thumb-height, $fallbacks); + } + .mdc-slider__thumb, .mdc-slider__track--active_fill { transition-duration: 0ms;