From f208c834eabd84d5ae32c07ddf3f8987d55e1438 Mon Sep 17 00:00:00 2001
From: Rens Heddes <rens.h@me.com>
Date: Wed, 11 Sep 2024 16:38:01 +0200
Subject: [PATCH 1/2] Prevent scrolling to old slider position on click

---
 packages/react/slider/src/Slider.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/slider/src/Slider.tsx b/packages/react/slider/src/Slider.tsx
index 5bf2e7dd1..b35910e81 100644
--- a/packages/react/slider/src/Slider.tsx
+++ b/packages/react/slider/src/Slider.tsx
@@ -100,7 +100,7 @@ const Slider = React.forwardRef<SliderElement, SliderProps>(
       defaultProp: defaultValue,
       onChange: (value) => {
         const thumbs = [...thumbRefs.current];
-        thumbs[valueIndexToChangeRef.current]?.focus();
+        thumbs[valueIndexToChangeRef.current]?.focus({ preventScroll: true });
         onValueChange(value);
       },
     });
@@ -431,7 +431,7 @@ const SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(
           // Touch devices have a delay before focusing so won't focus if touch immediately moves
           // away from target (sliding). We want thumb to focus regardless.
           if (context.thumbs.has(target)) {
-            target.focus();
+            target.focus({ preventScroll: true });
           } else {
             onSlideStart(event);
           }

From 2c9e605cf6828c8cfdebe94ec0db78ba768727ff Mon Sep 17 00:00:00 2001
From: Rens Heddes <rens.h@me.com>
Date: Thu, 12 Sep 2024 11:51:30 +0200
Subject: [PATCH 2/2] Update story to include fixed example

---
 .yarn/versions/fecf9f47.yml                  |  5 +++++
 packages/react/slider/src/Slider.stories.tsx | 20 ++++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 .yarn/versions/fecf9f47.yml

diff --git a/.yarn/versions/fecf9f47.yml b/.yarn/versions/fecf9f47.yml
new file mode 100644
index 000000000..bbc314a11
--- /dev/null
+++ b/.yarn/versions/fecf9f47.yml
@@ -0,0 +1,5 @@
+releases:
+  "@radix-ui/react-slider": patch
+
+declined:
+  - primitives
diff --git a/packages/react/slider/src/Slider.stories.tsx b/packages/react/slider/src/Slider.stories.tsx
index 529bcc78f..371a06019 100644
--- a/packages/react/slider/src/Slider.stories.tsx
+++ b/packages/react/slider/src/Slider.stories.tsx
@@ -346,6 +346,26 @@ export const Strict = () => (
   </React.StrictMode>
 );
 
+export const InScrollableContext = () => {
+  const [value, setValue] = React.useState(0);
+
+  return (
+    <div style={{ width: '40vw', overflowX: 'scroll', border: '1px' }}>
+      <Slider.Root
+        className={rootClass()}
+        style={{ width: '100vw' }}
+        value={[value]}
+        onValueChange={([newValue]: [number]) => setValue(newValue)}
+      >
+        <Slider.Track className={trackClass()}>
+          <Slider.Range className={rangeClass()} />
+        </Slider.Track>
+        <Slider.Thumb className={thumbClass()} />
+      </Slider.Root>
+    </div>
+  );
+};
+
 export const Chromatic = () => (
   <>
     <h1>Uncontrolled</h1>