diff --git a/packages/@react-aria/overlays/src/usePreventScroll.ts b/packages/@react-aria/overlays/src/usePreventScroll.ts index 6c4b7ee5772..c8687d33b97 100644 --- a/packages/@react-aria/overlays/src/usePreventScroll.ts +++ b/packages/@react-aria/overlays/src/usePreventScroll.ts @@ -106,6 +106,14 @@ function preventScrollMobileSafari() { allowTouchMove = true; } + // If this is a range input, allow touch move to allow user to adjust the slider value + if (e.composedPath().some((el) => + el instanceof HTMLInputElement && + el.type === 'range' + )) { + allowTouchMove = true; + } + // If this is a focused input element with a selected range, allow user to drag the selection handles. if ( 'selectionStart' in target && diff --git a/packages/@react-aria/overlays/stories/usePreventScroll.stories.tsx b/packages/@react-aria/overlays/stories/usePreventScroll.stories.tsx index 20a411cedf5..09002fd1e93 100644 --- a/packages/@react-aria/overlays/stories/usePreventScroll.stories.tsx +++ b/packages/@react-aria/overlays/stories/usePreventScroll.stories.tsx @@ -46,6 +46,9 @@ function App(): JSX.Element { Click Me in safari and then scroll + +

Should be able to scroll the range input on iOS Safari

+ ); }