### Run Example Package in Development Mode

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/CONTRIBUTING.md

Starts the example application in development mode. This showcases the usage of the library.

```sh
# Run example only.
pnpm run --filter @this/example dev
```

```sh
# You can also run the scripts from the directory itself if you prefer.
cd docs/example
pnpm run dev
```

--------------------------------

### Install and Run Demo

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/example/README.md

Use these commands to install project dependencies and start the local development server for the React Compare Slider demo.

```sh
pnpm install
pnpm dev
```

--------------------------------

### Install React Compare Slider

Source: https://github.com/nerdyman/react-compare-slider/blob/main/README.md

Install the library using npm, yarn, or pnpm.

```sh
npm install react-compare-slider
# or
yarn add react-compare-slider
# or
pnpm add react-compare-slider
```

--------------------------------

### Custom Slider Example

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/02-components-api.mdx

Demonstrates how to build a custom slider using the components provided by the library. This example utilizes the `CustomSlider` component, which is likely a pre-configured setup for demonstration purposes.

```javascript
import { Canvas, Description, Meta, ArgTypes } from "@storybook/addon-docs/blocks";

import {
  Provider,
  Root,
  Item,
  Image,
  HandleRoot,
  Handle,
} from "react-compare-slider/components";
import { useReactCompareSlider } from 'react-compare-slider/hooks';

import { CustomSlider } from './stories/00-demos/00-index.stories';

<Meta title="Docs/Components API" />

# Components API

<p class="sb-custom-info">

**Note:** These components are automatically used by the pre-built `ReactCompareSlider` component. If you are
using the `ReactCompareSlider` component you _should not_ use the components, other than `Handle`, should you
want to customise the default handle.

</p>

You can build your own slider using the components exported from the `react-compare-slider/components` module.
These components work similarly to libraries like Base UI and Radix. They give you full control over the components, state
and event bindings and are used in conjunction with the `useReactCompareSlider` hook.

## Custom Slider Example

<Canvas of={CustomSlider} />

## Components

### `Provider`

<Description of={Provider} />

These props are returned by the `useReactCompareSlider` hook.

<ArgTypes of={Provider} />

### `Root`

<Description of={Root} />

Accepts all valid `div` component props.

### `Item`

<Description of={Item} />

Accepts all valid `div` component props in addition to:

<ArgTypes of={Item} />

### `Image`

<Description of={Image} />

Accepts all valid `img` component props.

### `HandleRoot`

<Description of={HandleRoot} />

Accepts all valid `div` component props.

### `Handle`

<Description of={Handle} />
<ArgTypes of={Handle} />
```

--------------------------------

### Bootstrap Monorepo with npm

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/CONTRIBUTING.md

Run this command to set up the pnpm monorepo. Ensure you have the correct Node.js version installed.

```sh
npm run bootstrap
```

--------------------------------

### Run react-compare-slider Library in Watch Mode

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/CONTRIBUTING.md

Starts the main library package in development watch mode. This command must be run before starting Storybook.

```sh
# Run the library only, note this must run before starting Storybook.
pnpm run --filter react-compare-slider dev
```

```sh
# You can also run the scripts from the directory itself if you prefer.
cd lib
pnpm run dev
```

--------------------------------

### Custom Handle Component Example

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/handles.mdx

This example demonstrates how to use a custom component for the slider handle. Ensure the custom component is a non-interactive element.

```jsx
import { ReactCompareSlider, ReactCompareSliderHandle } from 'react-compare-slider';

<ReactCompareSlider
  handle={<ReactCompareSliderHandle>My Custom Handle</ReactCompareSliderHandle>}
/>;
```

--------------------------------

### Run Storybook in Development Mode

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/CONTRIBUTING.md

Starts the Storybook development server. This is useful for developing and previewing UI components.

```sh
# Run Storybook only.
pnpm run --filter @this/storybook dev
```

```sh
# You can also run the scripts from the directory itself if you prefer.
cd docs/storybook
pnpm run dev
```

--------------------------------

### Custom Standalone Handle Example

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/handles.mdx

This example illustrates the usage of a custom component as a standalone handle. The custom component can be any valid React element.

```jsx
import { ReactCompareSlider, ReactCompareSliderHandle } from 'react-compare-slider';

<ReactCompareSlider
  handle={<div className="my-custom-handle"></div>}
/>;
```

--------------------------------

### Basic ReactCompareSlider Usage

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

Demonstrates the basic setup for `ReactCompareSlider` with required `itemOne` and `itemTwo` props. All other props are optional and control aspects like initial position, orientation, and transitions.

```tsx
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export const BasicExample = () => (
  <ReactCompareSlider
    // Required: the two items to compare
    itemOne={<ReactCompareSliderImage src="/before.jpg" alt="Before" />}
    itemTwo={<ReactCompareSliderImage src="/after.jpg" alt="After" />}
    // Optional props with their defaults shown
    defaultPosition={50}          // initial divider position (0–100)
    portrait={false}              // true = vertical divider
    disabled={false}              // freeze the handle
    changePositionOnHover={false} // move handle on hover instead of drag
    onlyHandleDraggable={false}   // restrict drag to the handle element only
    boundsPadding="0px"           // CSS unit; keeps handle away from edges
    keyboardIncrement="5%"        // step size per arrow-key press
    transition="0.15s ease-out"   // CSS transition shorthand for handle movement
    clip="all"                    // 'all' | 'itemOne' | 'itemTwo'
    onPositionChange={(pos) => console.log('position:', pos)}
    style={{ width: '100%', height: '60vh' }}
  />
);
```

--------------------------------

### StyleFitContainer Example

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/01-api.mdx

Use the styleFitContainer utility to make an element fill its parent while maintaining aspect ratio. Defaults to object-fit: cover.

```jsx
import { styleFitContainer } from "react-compare-slider";

<div style={{ width: "100vw", height: "100vh" }}>
  <video
    style={{
      ...styleFitContainer({
        objectFit: "contain",
        objectPosition: "center",
      }),
    }}
  />
</div>;
```

--------------------------------

### Set Bounds Padding

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/bounds-padding.mdx

Use the `boundsPadding` prop to restrict the slider's movement. This example sets the padding to 5% of the slider's dimension.

```jsx
boundsPadding="5%"
```

--------------------------------

### Inherited Color Handle Example

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/handles.mdx

This example shows how the colors of the ReactCompareSliderHandle are inherited from the CSS variable --rcs-handle-color. No specific imports are needed beyond the main component.

```jsx
import { ReactCompareSlider, ReactCompareSliderHandle } from 'react-compare-slider';

<ReactCompareSlider
  handle={<ReactCompareSliderHandle />}
/>;
```

--------------------------------

### UseReactCompareSliderContext Example

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/01-api.mdx

Access context from useReactCompareSliderContext within a component rendered inside ReactCompareSlider. Allows controlling position and accessing portrait mode.

```tsx
import { useReactCompareSliderContext } from "react-compare-slider";

/** Custom component rendered within `Provider` or `ReactCompareSlider`. */
const CustomItem = () => {
  const { setPosition, portrait } = useReactCompareSliderContext();

  return (
    <div>
      <p>Is portrait: {portrait.toString()}</p>
      <button onClick={() => setPosition(75)}>Set position to 75%</button>
    </div>
  );
};
```

--------------------------------

### Construct Custom Slider with React Compare Slider

Source: https://github.com/nerdyman/react-compare-slider/blob/main/README.md

Use `useReactCompareSlider` hook to access state and event bindings for building a custom slider. This example demonstrates a portrait orientation slider.

```tsx
import * as Slider from 'react-compare-slider/components';
import { useReactCompareSlider } from 'react-compare-slider/hooks';

export const Example = () => {
  // Access to state and event bindings of the slider.
  const sliderProps = useReactCompareSlider({ portrait: true });

  return (
    <Slider.Provider {...sliderProps}>
      <Slider.Root>
        <Slider.Item item="itemOne">
          <Slider.Image
            src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/lady-1.png"
            alt="Image one"
          />
        </Slider.Item>
        <Slider.Item item="itemTwo">
          <Slider.Image
            src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/lady-2.png"
            alt="Image two"
          />
        </Slider.Item>
        <Slider.HandleRoot>
          <Slider.Handle />
        </Slider.HandleRoot>
      </Slider.Root>
    </Slider.Provider>
};
```

--------------------------------

### Run Tests in CI Mode

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/CONTRIBUTING.md

Executes the test suite in a mode suitable for Continuous Integration environments. Use this if Storybook is not running.

```sh
pnpm run test:ci
```

--------------------------------

### Run Tests with Storybook Running

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/CONTRIBUTING.md

Executes the test suite when Storybook is already running. This is typically used during development.

```sh
pnpm run test
```

--------------------------------

### Build Custom Slider with Low-Level Components and Hooks

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

Compose primitive components and use the `useReactCompareSlider` hook to build a fully custom slider. This approach mirrors patterns used by libraries like Radix UI or Base UI. Override event handlers by always calling the original function after your custom logic.

```tsx
import * as Slider from 'react-compare-slider/components';
import { useReactCompareSlider } from 'react-compare-slider/hooks';
import { useState, useCallback } from 'react';

export const FullyCustomSlider = () => {
  const [isDraggingLabel, setIsDraggingLabel] = useState('idle');

  // Destructure all state + event handlers from the hook.
  const {
    isDragging,
    canTransition,
    onPointerDown,
    onPointerUp,
    setPosition,
    setPositionFromBounds,
    rootRef,
    ...sliderProps
  } = useReactCompareSlider({
    defaultPosition: 50,
    portrait: false,
    transition: '0.2s ease-out',
    keyboardIncrement: '10%',
    onPositionChange: (pos) => console.log('pos:', pos),
  });

  // Override pointer events while keeping original behaviour.
  const customPointerDown: typeof onPointerDown = useCallback(
    (ev) => {
      setIsDraggingLabel('dragging');
      onPointerDown(ev);           // always call the original
    },
    [onPointerDown],
  );

  const customPointerUp: typeof onPointerUp = useCallback(
    (ev) => {
      setIsDraggingLabel('idle');
      onPointerUp(ev);
    },
    [onPointerUp],
  );

  return (
    <div>
      <p>Status: {isDraggingLabel}</p>
      <button onClick={() => setPosition(25)}>25%</button>
      <button onClick={() => setPosition(75)}>75%</button>

      <Slider.Provider
        {...sliderProps}
        rootRef={rootRef}
        isDragging={isDragging}
        canTransition={canTransition}
        onPointerDown={customPointerDown}
        onPointerUp={customPointerUp}
        setPosition={setPosition}
        setPositionFromBounds={setPositionFromBounds}
      >
        <Slider.Root style={{ width: '100%', height: '500px' }}>
          <Slider.Item item="itemOne">
            <Slider.Image src="/before.jpg" alt="Before" />
          </Slider.Item>
          <Slider.Item item="itemTwo">
            <Slider.Image src="/after.jpg" alt="After" />
          </Slider.Item>
          <Slider.HandleRoot>
            <Slider.Handle
              buttonStyle={{ background: 'navy', borderColor: 'white' }}
            />
          </Slider.HandleRoot>
        </Slider.Root>
      </Slider.Provider>
    </div>
  );
};

```

--------------------------------

### Animated Position Changes with CSS Transition

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

Use the `transition` prop to animate handle movement. This prop accepts a CSS transition shorthand. It defaults to 'none' for users preferring reduced motion.

```tsx
import { useEffect, useState } from 'react';
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export const AnimatedSlider = () => {
  const [position, setPosition] = useState(50);

  // Auto-sweep on mount
  useEffect(() => {
    const steps = [10, 90, 50];
    let i = 0;
    const id = setInterval(() => {
      setPosition(steps[i % steps.length]!);
      i++;
      if (i >= steps.length) clearInterval(id);
    }, 600);
    return () => clearInterval(id);
  }, []);

  return (
    <ReactCompareSlider
      defaultPosition={position}
      transition="0.5s ease-in-out"
      itemOne={<ReactCompareSliderImage src="/before.jpg" alt="Before" />}
      itemTwo={<ReactCompareSliderImage src="/after.jpg" alt="After" />}
      style={{ width: '100%', height: '500px' }}
    />
  );
};

```

--------------------------------

### Image Comparison with ReactCompareSliderImage

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

Shows how to use `ReactCompareSliderImage` for comparing images, including `srcSet` for responsive images and overriding default object fit styles.

```tsx
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export const ImageComparison = () => (
  <ReactCompareSlider
    itemOne={
      <ReactCompareSliderImage
        src="https://example.com/before.jpg"
        srcSet="https://example.com/before@2x.jpg 2x"
        alt="Before processing"
        // override fill behaviour
        style={{ objectFit: 'contain', objectPosition: 'top center' }}
      />
    }
    itemTwo={
      <ReactCompareSliderImage
        src="https://example.com/after.jpg"
        srcSet="https://example.com/after@2x.jpg 2x"
        alt="After processing"
        style={{ objectFit: 'contain', objectPosition: 'top center' }}
      />
    }
    style={{ width: '100%', height: '500px' }}
  />
);
```

--------------------------------

### Basic Image Comparison with React Compare Slider

Source: https://github.com/nerdyman/react-compare-slider/blob/main/README.md

Demonstrates basic usage of ReactCompareSlider with ReactCompareSliderImage for comparing two images. Ensure you provide valid 'src' and 'srcSet' attributes for the images.

```tsx
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export const Example = () => {
  return (
    <ReactCompareSlider
      itemOne={<ReactCompareSliderImage src="..." srcSet="..." alt="Image one" />}
      itemTwo={<ReactCompareSliderImage src="..." srcSet="..." alt="Image two" />}
    />
  );
};
```

--------------------------------

### Custom Handle Usage

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/handles.mdx

Demonstrates how to use custom components as handles for the React Compare Slider. Custom handles can be passed via the 'handle' prop on the main slider component.

```APIDOC
## Custom Handle Usage

### Description
Custom Handles can be used via the `handle` prop on the main slider component. If a custom `handle` is not supplied `ReactCompareSliderHandle` will be used instead.

**Note**: You should use non-interactive elements (e.g., `div`, `span`) for custom `handle` components as they are announced as slider controls to screen readers.
```

--------------------------------

### Support iframe/Popup with `browsingContext`

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

When rendering inside an iframe or popup window, pass the child `window` as `browsingContext` to ensure pointer events are captured correctly. This is crucial for maintaining slider functionality across different browsing contexts.

```tsx
import { useState } from 'react';
import { createPortal } from 'react-dom';
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export const IframeExample = () => {
  const [popupCtx, setPopupCtx] = useState<WindowProxy | null>(null);

  return (
    <div>
      <button
        onClick={() =>
          setPopupCtx(window.open('', '', 'popup,width=600,height=400'))
        }
      >
        Open in popup
      </button>

      {popupCtx &&
        createPortal(
          <ReactCompareSlider
            browsingContext={popupCtx}
            itemOne={<ReactCompareSliderImage src="/before.jpg" alt="Before" />}
            itemTwo={<ReactCompareSliderImage src="/after.jpg" alt="After" />}
            style={{ width: '100%', height: '100%' }}
          />,
          popupCtx.document.body,
        )}
    </div>
  );
};

```

--------------------------------

### Import CSS Variables

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/01-api.mdx

Import the ReactCompareSliderCssVars object to reference CSS variables in your code.

```tsx
import { ReactCompareSliderCssVars } from "react-compare-slider";
```

--------------------------------

### ReactCompareSliderImage Standard Usage

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/images.mdx

Demonstrates the standard way to use the ReactCompareSliderImage component with src and srcSet props.

```jsx
import { ReactCompareSliderImage } from 'react-compare-slider';

/** Standard usage. */
<ReactCompareSliderImage src="..." srcSet="..." />
```

--------------------------------

### Apply CSS Transition to Slider

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/transition.mdx

Use the `transition` prop to apply a CSS transition effect when the slider is moved. The value should be a CSS transition shorthand string, like `"0.25s cubic-bezier(.17,.67,.83,.67)"`. The transition is optimized for `pointerdown` events for immediate feedback during drag.

```jsx
<ReactCompareSlider
  transition="0.25s cubic-bezier(.17,.67,.83,.67)"
/>
```

--------------------------------

### Hover Mode with `changePositionOnHover`

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

Enable hover mode by setting the `changePositionOnHover` prop. The slider will track the pointer position when hovered, eliminating the need for click-and-drag interaction.

```tsx
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export const HoverSlider = () => (
  <ReactCompareSlider
    changePositionOnHover
    itemOne={
      <ReactCompareSliderImage
        src="/grayscale.jpg"
        alt="Grayscale"
        style={{ filter: 'grayscale(1)' }}
      />
    }
    itemTwo={<ReactCompareSliderImage src="/color.jpg" alt="Color" />}
    style={{ width: '100%', height: '500px' }}
  />
);
```

--------------------------------

### Keyboard Increment by Percentage

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/keyboard-increment.mdx

Use a percentage string (e.g., '20%') for relative adjustments based on the slider's width or height. This ensures consistent behavior across different resolutions.

```jsx
import { ReactCompareSlider } from 'react-compare-slider';

<ReactCompareSlider
  keyboardIncrement={'20%'}
/>
```

--------------------------------

### CSS Variables

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/01-api.mdx

Provides access to CSS variables for styling the slider components.

```APIDOC
## CSS Variables

### Description
The library exports the `ReactCompareSliderCssVars` object to easily reference the CSS variables in code.

### Usage
```tsx
import { ReactCompareSliderCssVars } from "react-compare-slider";
```

### CSS Variables Values
(Refer to the JSON output for specific variable values)
```

--------------------------------

### Root Component

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/02-components-api.mdx

The Root component serves as the main container for the slider. It accepts all valid div component props.

```APIDOC
## Root

### Description

The Root component.

Accepts all valid `div` component props.
```

--------------------------------

### styleFitContainer Utility

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/01-api.mdx

A utility function that returns a React style object to make an element fill its parent while maintaining aspect ratio.

```APIDOC
## styleFitContainer

### Description
The `styleFitContainer` utility makes any [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element) fill its parent while maintaining the correct aspect ratio.

It returns a React `style` object and accepts a CSS object as an argument and defaults to `object-fit` to `cover`.

### Example
```jsx
import { styleFitContainer } from "react-compare-slider";

<div style={{ width: "100vw", height: "100vh" }}>
  <video
    style={{
      ...styleFitContainer({
        objectFit: "contain",
        objectPosition: "center",
      }),
    }}
  />
</div>;
```
```

--------------------------------

### Position Change Callback with `onPositionChange`

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

Utilize the `onPositionChange` prop to receive the current slider position (0-100) on every update. This is useful for synchronizing external state or displaying the current position.

```tsx
import { useState, useCallback } from 'react';
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export const PositionDisplay = () => {
  const [position, setPosition] = useState(50);

  const handlePositionChange = useCallback((pos: number) => {
    setPosition(Math.round(pos));
  }, []);

  return (
    <div>
      <p>Current position: {position}%</p>
      <ReactCompareSlider
        defaultPosition={50}
        onPositionChange={handlePositionChange}
        itemOne={<ReactCompareSliderImage src="/before.jpg" alt="Before" />}
        itemTwo={<ReactCompareSliderImage src="/after.jpg" alt="After" />}
        style={{ width: '100%', height: '500px' }}
      />
    </div>
  );
};
```

--------------------------------

### Fitting Replaced Elements with styleFitContainer

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

The `styleFitContainer` utility generates a style object to make replaced elements like `img` or `video` fill their parent container. It's used internally by `ReactCompareSliderImage` but can be used independently.

```tsx
import { ReactCompareSlider, styleFitContainer } from 'react-compare-slider';

export const VideoComparison = () => (
  <ReactCompareSlider
    itemOne={
      <video
        autoPlay
        loop
        muted
        playsInline
        src="/before.mp4"
        style={styleFitContainer()}
        // Override defaults selectively:
        // style={styleFitContainer({ objectFit: 'contain', objectPosition: 'top' })}
      />
    }
    itemTwo={
      <video
        autoPlay
        loop
        muted
        playsInline
        src="/after.mp4"
        style={styleFitContainer()}
      />
    }
    style={{ width: '100%', height: '500px' }}
  />
);

```

--------------------------------

### Customizing ReactCompareSlider Handle

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

Illustrates how to customize the slider's handle using the `handle` prop with `ReactCompareSliderHandle`. Allows styling of the central button and the lines on either side, including using CSS custom properties for color.

```tsx
import {
  ReactCompareSlider,
  ReactCompareSliderHandle,
  ReactCompareSliderImage,
} from 'react-compare-slider';

export const StyledHandle = () => (
  <ReactCompareSlider
    handle={
      <ReactCompareSliderHandle
        // Style the circular button in the middle
        buttonStyle={{
          backdropFilter: 'blur(4px)',
          background: 'rgba(0,0,0,0.5)',
          border: '2px solid hotpink',
          color: 'hotpink',
          // --rcs-handle-color drives both lines and arrows
          ['--rcs-handle-color' as string]: 'hotpink',
        }}
        // Style the lines either side of the button
        linesStyle={{ opacity: 0.75 }}
      />
    }
    itemOne={<ReactCompareSliderImage src="/before.jpg" alt="Before" />}
    itemTwo={<ReactCompareSliderImage src="/after.jpg" alt="After" />}
    style={{ width: '100%', height: '500px' }}
  />
);
```

--------------------------------

### Selective Clipping with `clip` Prop

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

Control which item is clipped using the `clip` prop. Options include 'all', 'itemOne', or 'itemTwo'. This is useful for effects like overlays or selective reveals.

```tsx
import { ReactCompareSlider, ReactCompareSliderImage, ReactCompareSliderClip } from 'react-compare-slider';

// Only itemTwo is clipped; itemOne always shows in full underneath.
export const ClipItemTwo = () => (
  <ReactCompareSlider
    clip={ReactCompareSliderClip.itemTwo}  // 'all' | 'itemOne' | 'itemTwo'
    itemOne={<ReactCompareSliderImage src="/base.jpg" alt="Base layer" />}
    itemTwo={
      <ReactCompareSliderImage
        src="/overlay.jpg"
        alt="Overlay layer"
        style={{ mixBlendMode: 'multiply' }}
      />
    }
    style={{ width: '100%', height: '500px' }}
  />
);
```

--------------------------------

### Image Component

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/02-components-api.mdx

The Image component is used for displaying images within the slider. It accepts all valid img component props.

```APIDOC
## Image

### Description

The Image component.

Accepts all valid `img` component props.
```

--------------------------------

### Keyboard Increment by Pixels

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/keyboard-increment.mdx

Use a number to set the pixel value for keyboard increment/decrement. This moves the slider by a fixed pixel amount.

```jsx
import { ReactCompareSlider } from 'react-compare-slider';

<ReactCompareSlider
  keyboardIncrement={20}
/>
```

--------------------------------

### HandleRoot Component

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/02-components-api.mdx

The HandleRoot component acts as a container for the slider handle. It accepts all valid div component props.

```APIDOC
## HandleRoot

### Description

The HandleRoot component.

Accepts all valid `div` component props.
```

--------------------------------

### Custom Handle with `handle` Prop

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

Replace the default slider handle with any custom React node by passing it to the `handle` prop. Use `useReactCompareSliderContext` within the custom handle to access slider state like orientation.

```tsx
import {
  ReactCompareSlider,
  ReactCompareSliderImage,
  useReactCompareSliderContext,
} from 'react-compare-slider';

const RainbowHandle: React.FC = () => {
  const { portrait } = useReactCompareSliderContext();

  return (
    <div
      style={{
        width: portrait ? '100%' : '4px',
        height: portrait ? '4px' : '100%',
        background: 'linear-gradient(to bottom, red, orange, yellow, green, blue, violet)',
        pointerEvents: 'auto',
        cursor: portrait ? 'ns-resize' : 'ew-resize',
      }}
    />
  );
};

export const CustomHandleExample = () => (
  <ReactCompareSlider
    handle={<RainbowHandle />}
    itemOne={<ReactCompareSliderImage src="/before.jpg" alt="Before" />}
    itemTwo={<ReactCompareSliderImage src="/after.jpg" alt="After" />}
    style={{ width: '100%', height: '500px' }}
  />
);
```

--------------------------------

### Provider Component

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/02-components-api.mdx

The Provider component is used to provide context to the slider components. Its props are returned by the useReactCompareSlider hook.

```APIDOC
## Provider

### Description

The Provider component.

### Props

These props are returned by the `useReactCompareSlider` hook.

<ArgTypes of={Provider} />
```

--------------------------------

### ReactCompareSliderImage - Convenience Image Component

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

A helper component for displaying images within the slider. It applies default styling to ensure images fit the slider slots correctly and accepts all standard HTML `img` attributes.

```APIDOC
## ReactCompareSliderImage

### Description
A thin `<img>` wrapper that applies `styleFitContainer` defaults so images fill the slider slot correctly. Accepts all standard HTML `img` props.

### Props
Accepts all standard HTML `img` props, including:
- **src** (string) - Required - The URL of the image.
- **srcSet** (string) - Optional - The image's `srcset` attribute.
- **alt** (string) - Required - The alternative text for the image.
- **style** (object) - Optional - Inline styles to override default fill behavior.

### Request Example
```tsx
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export const ImageComparison = () => (
  <ReactCompareSlider
    itemOne={
      <ReactCompareSliderImage
        src="https://example.com/before.jpg"
        srcSet="https://example.com/before@2x.jpg 2x"
        alt="Before processing"
        style={{ objectFit: 'contain', objectPosition: 'top center' }}
      />
    }
    itemTwo={
      <ReactCompareSliderImage
        src="https://example.com/after.jpg"
        srcSet="https://example.com/after@2x.jpg 2x"
        alt="After processing"
        style={{ objectFit: 'contain', objectPosition: 'top center' }}
      />
    }
    style={{ width: '100%', height: '500px' }}
  />
);
```
```

--------------------------------

### Component Props

Source: https://github.com/nerdyman/react-compare-slider/blob/main/README.md

The React Compare Slider component accepts the following props for customization.

```APIDOC
## Component Props

### `boundsPadding`

- **Type**: `string`
- **Required**: No
- **Default**: `0px`
- **Description**: Padding to limit the slideable bounds on the X-axis (landscape) or Y-axis (portrait).

### `browsingContext`

- **Type**: `globalThis`
- **Required**: No
- **Default**: `globalThis`
- **Description**: Context to bind events to (useful for iframes).

### `changePositionOnHover`

- **Type**: `boolean`
- **Required**: No
- **Default**: `false`
- **Description**: Whether the slider should follow the pointer on hover.

### `clip`

- **Type**: `all` | `itemOne` | `itemTwo`
- **Required**: No
- **Default**: `all`
- **Description**: Whether to clip `itemOne`, `itemTwo` or `all` items.

### `defaultPosition`

- **Type**: `number`
- **Required**: No
- **Default**: `50`
- **Description**: Initial percentage position of divide (`0-100`).

### `disabled`

- **Type**: `boolean`
- **Required**: No
- **Default**: `false`
- **Description**: Whether to disable slider movement (items are still interactable).

### `handle`

- **Type**: `ReactNode`
- **Required**: No
- **Default**: `undefined`
- **Description**: Custom handle component.

### `itemOne`

- **Type**: `ReactNode`
- **Required**: Yes
- **Default**: `undefined`
- **Description**: First component to show in slider.

### `itemTwo`

- **Type**: `ReactNode`
- **Required**: Yes
- **Default**: `undefined`
- **Description**: Second component to show in slider.

### `keyboardIncrement`

- **Type**: `number` | `${number}%`
- **Required**: No
- **Default**: `5%`
- **Description**: Percentage or pixel amount to move when the slider handle is focused and keyboard arrow is pressed.

### `onlyHandleDraggable`

- **Type**: `boolean`
- **Required**: No
- **Default**: `true` for touch devices, `false` for non-touch devices
- **Description**: Whether to only change position when handle is interacted with (useful for touch devices).

### `onPositionChange`

- **Type**: `(position: number) => void`
- **Required**: No
- **Default**: `undefined`
- **Description**: Callback on position change, returns current position percentage as argument.

### `portrait`

- **Type**: `boolean`
- **Required**: No
- **Default**: `false`
- **Description**: Whether to use portrait orientation.

### `transition`

- **Type**: `string`
- **Required**: No
- **Default**: `'0.15s ease-out'` | `'none`
- **Description**: Shorthand CSS `transition` property to apply to handle movement. This is automatically `none` for users with the `prefers-reduced-motion: reduced` preference.
```

--------------------------------

### Handle Component

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/02-components-api.mdx

The Handle component represents the draggable handle of the slider. It accepts standard div props.

```APIDOC
## Handle

### Description

The Handle component.

<ArgTypes of={Handle} />
```

--------------------------------

### ReactCompareSlider Component

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/01-api.mdx

The main component for creating a comparison slider. It accepts various props to customize its appearance and behavior.

```APIDOC
## ReactCompareSlider

### Description
The main component for creating a comparison slider. It accepts various props to customize its appearance and behavior.

### Props

(Refer to ArgTypes for detailed prop information)
```

--------------------------------

### useReactCompareSliderContext Hook

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/01-api.mdx

A hook to access the context provided by ReactCompareSlider, allowing interaction with the slider's state.

```APIDOC
## useReactCompareSliderContext

### Description
A hook to access the context provided by ReactCompareSlider, allowing interaction with the slider's state.

### Example
```tsx
import { useReactCompareSliderContext } from "react-compare-slider";

/** Custom component rendered within `Provider` or `ReactCompareSlider`. */
const CustomItem = () => {
  const { setPosition, portrait } = useReactCompareSliderContext();

  return (
    <div>
      <p>Is portrait: {portrait.toString()}</p>
      <button onClick={() => setPosition(75)}>Set position to 75%</button>
    </div>
  );
};
```
```

--------------------------------

### Portrait (Vertical) Orientation

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

Set the `portrait` prop to `true` to change the slider orientation to vertical, allowing for top-to-bottom image comparison.

```tsx
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export const PortraitExample = () => (
  <ReactCompareSlider
    portrait
    defaultPosition={50}
    itemOne={
      <ReactCompareSliderImage
        src="/before.jpg"
        alt="Before"
        style={{ objectPosition: 'center top' }}
      />
    }
    itemTwo={
      <ReactCompareSliderImage
        src="/after.jpg"
        alt="After"
        style={{ objectPosition: 'center top' }}
      />
    }
    style={{ width: '100%', height: '80vh' }}
  />
);
```

--------------------------------

### ReactCompareSlider - Main Component

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

The primary `ReactCompareSlider` component for creating visual comparisons. It requires `itemOne` and `itemTwo` props and accepts various optional props to customize its behavior and appearance.

```APIDOC
## ReactCompareSlider

### Description
The pre-built component for creating comparisons. Requires `itemOne` and `itemTwo`; all other props are optional. It renders a `<div>` and forwards any extra `div` props to the root element.

### Props
- **itemOne** (ReactNode) - Required - The first item to compare.
- **itemTwo** (ReactNode) - Required - The second item to compare.
- **defaultPosition** (number) - Optional (default: 50) - Initial divider position (0–100).
- **portrait** (boolean) - Optional (default: false) - Set to true for a vertical divider.
- **disabled** (boolean) - Optional (default: false) - Freezes the handle.
- **changePositionOnHover** (boolean) - Optional (default: false) - Moves the handle on hover instead of drag.
- **onlyHandleDraggable** (boolean) - Optional (default: false) - Restricts drag to the handle element only.
- **boundsPadding** (string) - Optional (default: "0px") - CSS unit; keeps handle away from edges.
- **keyboardIncrement** (string) - Optional (default: "5%") - Step size per arrow-key press.
- **transition** (string) - Optional (default: "0.15s ease-out") - CSS transition shorthand for handle movement.
- **clip** (string) - Optional (default: "all") - Determines clipping: 'all', 'itemOne', or 'itemTwo'.
- **onPositionChange** (function) - Optional - Callback function when the position changes, receives the new position as an argument.
- **style** (object) - Optional - Inline styles for the root element.

### Request Example
```tsx
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export const BasicExample = () => (
  <ReactCompareSlider
    itemOne={<ReactCompareSliderImage src="/before.jpg" alt="Before" />}
    itemTwo={<ReactCompareSliderImage src="/after.jpg" alt="After" />}
    defaultPosition={50}
    portrait={false}
    disabled={false}
    changePositionOnHover={false}
    onlyHandleDraggable={false}
    boundsPadding="0px"
    keyboardIncrement="5%"
    transition="0.15s ease-out"
    clip="all"
    onPositionChange={(pos) => console.log('position:', pos)}
    style={{ width: '100%', height: '60vh' }}
  />
);
```
```

--------------------------------

### Item Component

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/02-components-api.mdx

The Item component represents an individual item within the slider. It accepts standard div props and additional specific props.

```APIDOC
## Item

### Description

The Item component.

Accepts all valid `div` component props in addition to:

<ArgTypes of={Item} />
```

--------------------------------

### Restricting Slider Range with `boundsPadding`

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

Use the `boundsPadding` prop to prevent the slider handle from reaching the absolute edges of the component. Accepts any valid CSS length value.

```tsx
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export const BoundedSlider = () => (
  <ReactCompareSlider
    boundsPadding="10%"   // handle stops 10% from each edge
    itemOne={<ReactCompareSliderImage src="/before.jpg" alt="Before" />}
    itemTwo={<ReactCompareSliderImage src="/after.jpg" alt="After" />}
    style={{ width: '100%', height: '500px' }}
  />
);
```

--------------------------------

### ReactCompareSliderImage Override Defaults

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/images.mdx

Shows how to override the default fitting and positioning behavior of ReactCompareSliderImage by providing custom styles, such as objectPosition.

```jsx
import { ReactCompareSliderImage } from 'react-compare-slider';

/** Override `styleFitContainer` defaults. */
<ReactCompareSliderImage
  src="..."
  srcSet="..."
  style={{ objectPosition: 'left' }}
/>
```

--------------------------------

### ReactCompareSliderImage Component

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/01-api.mdx

Component used to display images within the slider. It accepts standard HTML img attributes.

```APIDOC
## Image

### Description
Component used to display images within the slider. It accepts standard HTML img attributes.

### Props

`ReactCompareSliderImage` accepts any valid HTML `img` component props.
```

--------------------------------

### ReactCompareSliderHandle Component

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/01-api.mdx

Represents the handle used to control the slider's position. It can be customized through its props.

```APIDOC
## Handle

### Description
Represents the handle used to control the slider's position. It can be customized through its props.

### Props

(Refer to ArgTypes for detailed prop information)
```

--------------------------------

### ReactCompareSliderHandle

Source: https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/handles.mdx

The default handle component for React Compare Slider. It supports a 'portrait' prop for orientation and accepts standard div props for customization. Styling can be achieved via CSS class names.

```APIDOC
## ReactCompareSliderHandle

### Description
The default handle component for React Compare Slider. It supports a 'portrait' prop for orientation and accepts standard div props for customization. Styling can be achieved via CSS class names.

### Props

- `portrait` (boolean) - Optional - Flips the handle to match portrait orientation.
- Accepts any valid `div` component props.

### CSS Class Names

- `.__rcs-handle-root`: The root element of the handle.
- `.__rcs-handle-button`: The circular button element in the middle.
- `.__rcs-handle-line`: The lines on either side of the button.
```

--------------------------------

### ReactCompareSliderHandle - Custom Handle Component

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

Allows customization of the draggable handle within `ReactCompareSlider`. You can pass this component to the `handle` prop of `ReactCompareSlider` to modify its appearance while retaining default functionality.

```APIDOC
## ReactCompareSliderHandle

### Description
The default draggable handle rendered inside the slider. You can pass it to the `handle` prop of `ReactCompareSlider` to adjust its appearance while keeping default behaviour. Accepts `buttonStyle` and `linesStyle` for targeted style overrides, plus all `div` props.

### Props
- **buttonStyle** (object) - Optional - Styles for the circular button in the middle of the handle.
- **linesStyle** (object) - Optional - Styles for the lines on either side of the handle.
- **--rcs-handle-color** (string) - CSS Custom Property - Drives the color of the handle lines and arrows.
- Accepts all standard HTML `div` props.

### Request Example
```tsx
import {
  ReactCompareSlider,
  ReactCompareSliderHandle,
  ReactCompareSliderImage,
} from 'react-compare-slider';

export const StyledHandle = () => (
  <ReactCompareSlider
    handle={
      <ReactCompareSliderHandle
        buttonStyle={{
          backdropFilter: 'blur(4px)',
          background: 'rgba(0,0,0,0.5)',
          border: '2px solid hotpink',
          color: 'hotpink',
          ['--rcs-handle-color' as string]: 'hotpink',
        }}
        linesStyle={{ opacity: 0.75 }}
      />
    }
    itemOne={<ReactCompareSliderImage src="/before.jpg" alt="Before" />}
    itemTwo={<ReactCompareSliderImage src="/after.jpg" alt="After" />}
    style={{ width: '100%', height: '500px' }}
  />
);
```
```

--------------------------------

### Accessing Slider State with useReactCompareSliderContext

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

The `useReactCompareSliderContext` hook provides access to the slider's state (position, orientation) and event handlers from child components. Ensure the child component is rendered within `ReactCompareSlider`.

```tsx
import {
  ReactCompareSlider,
  ReactCompareSliderImage,
  useReactCompareSliderContext,
} from 'react-compare-slider';

const PositionControls: React.FC = () => {
  const { setPosition, position, portrait } = useReactCompareSliderContext();

  return (
    <div style={{ position: 'absolute', bottom: 8, left: 0, right: 0, textAlign: 'center', zIndex: 10 }}>
      <button onClick={() => setPosition(0)}>0%</button>
      <button onClick={() => setPosition(50)}>50%</button>
      <button onClick={() => setPosition(100)}>100%</button>
      <span style={{ marginLeft: 8 }}>
        {portrait ? 'Portrait' : 'Landscape'} — pos ref: {position.current?.toFixed(1)}%
      </span>
    </div>
  );
};

export const ContextExample = () => (
  <div style={{ position: 'relative', width: '100%', height: '500px' }}>
    <ReactCompareSlider
      itemOne={<ReactCompareSliderImage src="/before.jpg" alt="Before" />}
      itemTwo={<ReactCompareSliderImage src="/after.jpg" alt="After" />}
      style={{ width: '100%', height: '100%' }}
    >
      <PositionControls />
    </ReactCompareSlider>
  </div>
);

```

--------------------------------

### Using CSS Custom Properties with ReactCompareSliderCssVars

Source: https://context7.com/nerdyman/react-compare-slider/llms.txt

The `ReactCompareSliderCssVars` object provides CSS variable names for styling. These can be used in styled components or global CSS to customize elements like the handle color.

```tsx
import { ReactCompareSliderCssVars } from 'react-compare-slider';

// ReactCompareSliderCssVars:
// {
//   rawPosition:     '--rcs-raw-position',      // unclamped %, changes every frame
//   currentPosition: '--rcs-current-position',  // clamped % after boundsPadding
//   boundsPadding:   '--rcs-bounds-padding',
//   handleColor:     '--rcs-handle-color',       // drives handle lines and arrows
// }

// Use in a styled component or global CSS:
const overlayStyle: React.CSSProperties = {
  position: 'absolute',
  top: 0,
  left: `var(${ReactCompareSliderCssVars.currentPosition})`,
  transform: 'translateX(-50%)',
  background: 'rgba(0,0,0,0.5)',
  color: '#fff',
  padding: '2px 6px',
  pointerEvents: 'none',
};

// Override the handle colour globally via CSS:
// :root { --rcs-handle-color: hotpink; }

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.