docs: add boundsPadding documentation and examples

README.md

@@ -75,6 +75,7 @@ See the [Images docs](https://react-compare-slider.netlify.app/?path=/docs/docs-
 
 | Prop | Type | Required | Default value | Description |
 |------|------|:--------:|---------------|-------------|
+| `boundsPadding`    | `number` |   | `0` | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). |
 | `handle`    | `ReactNode` |   | `undefined` | Custom handle component |
 | `itemOne`   | `ReactNode` | ✓ | `undefined` | First component to show in slider |
 | `itemTwo`   | `ReactNode` | ✓ | `undefined` | Second component to show in slider |
@@ -97,13 +98,8 @@ for more information.
 
 ### Custom Handles
 
-<details>
-<summary>Blurred Arrows</summary>
-
 [![Custom Handles](./example/custom-handle-capture.gif)](https://codesandbox.io/s/react-compare-slider-simple-example-9si6l?file=/src/App.jsx)
 
-</details>
-
 See the [Handles docs](https://react-compare-slider.netlify.app/?path=/docs/docs-handles--page) for more information.
 
 ## Requirements

docs/05-bounds-padding.story.mdx

@@ -0,0 +1,41 @@
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
+
+import { Default } from './demos/01-Images.story';
+
+<Meta title="Docs/Bounds Padding" component={ReactCompareSlider} argTypes={Default.args} />
+
+# Using `BoundsPadding`
+
+- [ReactCompareSliderImage](<#reactcomparesliderimage>)
+- [Live Examples](<#live-examples>)
+
+The `boundsPadding` prop allows you to limit the slideable area on the Y-axis
+in `portrait` mode or on the X-axis in the default landscape mode. The default 
+`boundsPadding` value is `0`, negative values are treated the same as `0` and
+the value **MUST** be supplied as a number in pixels.
+
+Bounds padding is useful when the slider has other components overlaying it - e.g. in a full
+width/height carousel with previous and next buttons which you don't want the slider
+handle to going behind.
+
+In the example below, bounds padding prevents the slider handle from going
+within range of pixels of the left or right of the slider specified by the `boundsPadding` prop. The bounds are automatically
+applied to the top/bottom or right/left depending on the orientation of the slider.
+
+```JSX
+boundsPadding={100}
+```
+
+<Preview>
+    <Story id="demos-images--bounds-padding" />
+</Preview>
+
+<Props of={ReactCompareSlider} />
+
+<br />
+
+## Live Examples
+
+Checkout the [Bounds padding demos](?path=/story/demos-images--bounds-padding) to experiment with images.

docs/demos/01-Images.story.tsx

@@ -36,7 +36,7 @@ export const Default = (args) => (
   />
 );
 
-export const Portrait = ({ position, portrait }) => (
+export const Portrait = (args) => (
   <ReactCompareSlider
     itemOne={
       <ReactCompareSliderImage
@@ -51,8 +51,7 @@ export const Portrait = ({ position, portrait }) => (
         alt="Image two"
       />
     }
-    portrait={portrait}
-    position={position}
+    {...args}
     style={{ width: '100%', height: '100vh' }}
   />
 );
@@ -93,3 +92,28 @@ export const OnPositionChange = (args) => {
     </div>
   );
 };
+
+export const BoundsPadding = ({ boundsPadding = 80, ...args }) => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
+      <ReactCompareSlider
+        {...args}
+        boundsPadding={boundsPadding}
+        itemOne={
+          <ReactCompareSliderImage
+            src="https://images.unsplash.com/photo-1580617971729-27c448892e5a?auto=format&fit=crop&w=1500&q=80"
+            alt="Image one"
+            style={{ filter: 'grayscale(1)' }}
+          />
+        }
+        itemTwo={
+          <ReactCompareSliderImage
+            src="https://images.unsplash.com/photo-1580617971729-27c448892e5a?auto=format&fit=crop&w=1500&q=80"
+            alt="Image two"
+          />
+        }
+        style={{ width: '100%', flexGrow: 1 }}
+      />
+    </div>
+  );
+};

src/react-compare-slider.tsx

@@ -104,7 +104,7 @@ const ReactCompareSliderItem: React.FC<ReactCompareSliderCommonProps> = ({
 /** Comparison slider properties. */
 export interface ReactCompareSliderProps
   extends Omit<ReactCompareSliderCommonProps, 'position'> {
-  /** Padding to limit the slideable bounds in pixels on the X axis (landscape) or Y axis (portrait). */
+  /** Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). */
   boundsPadding?: number;
   /** Custom handle component. */
   handle?: React.ReactNode;