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 = () => (
);
+export const InScrollableContext = () => {
+ const [value, setValue] = React.useState(0);
+
+ return (
+
+ setValue(newValue)}
+ >
+
+
+
+
+
+
+ );
+};
+
export const Chromatic = () => (
<>
Uncontrolled
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(
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(
// 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);
}