Update story to include fixed example

radix-ui · Sep 12, 2024 · 2c9e605 · 2c9e605
1 parent f208c83
commit 2c9e605
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/.yarn/versions/fecf9f47.yml 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
@@ -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>