docs: add dedicated page for browsingContext

README.md

@@ -68,7 +68,7 @@ export const Example = () => {
 | Prop | Type | Required | Default | Description |
 | ---- | ---- | :------: | ------- | ----------- |
 | [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/demos--bounds-padding)                   | `number`                     |   | `0`           | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait).
-| `browsingContext`                                                                                               | `globalThis`                 |   | `globalThis`  | Context to bind events to (useful for iframes).
+| [`browsingContext`](https://react-compare-slider.vercel.app/?path=/story/demos--browsing-context)               | `globalThis`                 |   | `globalThis`  | Context to bind events to (useful for iframes).
 | [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/demos--change-position-on-hover) | `boolean`                    |   | `false`       | Whether the slider should follow the pointer on hover.
 | [`disabled`](https://react-compare-slider.vercel.app/?path=/story/demos--disabled)                              | `boolean`                    |   | `false`       |  Whether to disable slider movement (items are still interactable).
 | [`handle`](https://react-compare-slider.vercel.app/?path=/story/demos--handle)                                  | `ReactNode`                  |   | `undefined`   | Custom handle component.

docs/storybook/content/06-browsing-context.stories.mdx

@@ -0,0 +1,29 @@
+import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks';
+
+import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
+
+<Meta title="Docs/Browsing Context" component={ReactCompareSlider} />
+
+# Using `browsingContext`
+
+The `browsingContext` prop allows you to change the target that events are bound to. By default,
+`globalThis` (`Window`) is used and will cover 99.999% of use cases. However, if you are using
+the library outside of current window context (e.g. an `iframe` or pop-up window) you will notice
+that not all the events are caputed by the slider. `browsingContext` can be used to set a different
+target to bind events to.
+
+For example, if you wanted to render the slider in a popup you would use `createPortal` from `react-dom`
+with the `document.body` property of the popup as the DOM node for `createPortal` and pass the popup
+window context as the `browsingContext` prop.
+
+<Canvas>
+  <Story id="demos--browsing-context" />
+</Canvas>
+
+<ArgTypes of={ReactCompareSlider} />
+
+<br />
+
+## Live Examples
+
+Checkout the [Bounds padding examples](/story/demos--browsing-context).

docs/storybook/content/stories/00-demos/00-index.stories.tsx

@@ -86,7 +86,7 @@ export const BrowsingContext: StoryFn<ReactCompareSliderProps> = (props) => {
   return (
     <div>
       <button onClick={() => setBrowsingContext(window.open('', '', 'popup,width=200,height=200'))}>
-        Render in browsing context
+        Render in popup
       </button>
       {browsingContext &&
         createPortal(