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

Fixes #31101

Author: mistrykaran91

src/material/slider/_m2-slider.scss

@@ -13,6 +13,8 @@
     slider-handle-height: 20px,
     slider-handle-shape: 50%,
     slider-handle-width: 20px,
+    slider-thumb-height: 48px,
+    slider-thumb-width: 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,8 @@
       slider-active-track-height: 4px,
       slider-handle-height: 20px,
       slider-handle-width: 20px,
+      slider-thumb-height: 48px,
+      slider-thumb-width: 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.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;