fix(slider): slider knob has size to drag on ios safari

fixes #5016

PiperOrigin-RevId: 568960672

slider/internal/_slider.scss

@@ -430,13 +430,41 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   ::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    // note, this is sized to align with thumb but is 0 width so that
-    // fine adjustments are possible
-    block-size: var(--_state-layer-size);
-    inline-size: var(--_state-layer-size);
-    transform: scaleX(0);
+    // note, this is sized to align with thumb
+    block-size: var(--_handle-height);
+    inline-size: var(--_handle-width);
     opacity: 0;
     z-index: 2;
+    // Webkit on iOS requires some size to the thumb. We want to make this the
+    // same as --_handle-size but also be centered on the handle.
+    --_x-translate: calc(
+      (0.5 - var(--_start-fraction, 0)) * var(--_handle-width)
+    );
+  }
+
+  // native input range knob size for safari – it needs a size that's nonzero
+  input.start::-webkit-slider-thumb {
+    transform: translateX(var(--_x-translate));
+  }
+
+  input.end::-webkit-slider-thumb {
+    transform: translateX(calc(-1 * var(--_x-translate)));
+  }
+
+  @each $_rtl-selectors
+    in _get-rtl-selectors('input.start', '::-webkit-slider-thumb')
+  {
+    #{$_rtl-selectors} {
+      transform: translateX(calc(-1 * var(--_x-translate)));
+    }
+  }
+
+  @each $_rtl-selectors
+    in _get-rtl-selectors('input.end', '::-webkit-slider-thumb')
+  {
+    #{$_rtl-selectors} {
+      transform: translateX(var(--_x-translate));
+    }
   }
 
   ::-moz-range-thumb {