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

Fixes #31101

Author: mistrykaran91

src/material/slider/_m2-slider.scss

@@ -14,6 +14,7 @@
       slider-handle-height: 20px,
       slider-handle-shape: 50%,
       slider-handle-width: 20px,
+      slider-thumb-diameter: 48px,
       slider-inactive-track-height: 4px,
       slider-inactive-track-shape: 9999px,
       slider-value-indicator-border-radius: 4px,

src/material/slider/_m3-slider.scss

@@ -24,6 +24,7 @@
       slider-active-track-height: 4px,
       slider-handle-height: 20px,
       slider-handle-width: 20px,
+      slider-thumb-diameter: 48px,
       slider-inactive-track-height: 4px,
       slider-with-overlap-handle-outline-width: 1px,
       slider-with-tick-marks-active-container-opacity: 0.38,

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;
 

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-diameter, $fallbacks);
+  width: token-utils.slot(slider-thumb-diameter, $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-diameter, $fallbacks);
   margin: 0 $mat-slider-horizontal-margin;
   position: relative;
   touch-action: pan-y;