Metadata-Version: 2.1
Name: reflex-img-comparison-slider
Version: 0.0.1
Summary: Reflex custom component img-comparison-slider
Author-email: Carlos <carlbrownson@proton.me>
License: Apache-2.0
Keywords: reflex,reflex-custom-components
Classifier: Development Status :: 4 - Beta
Requires-Python: >=3.8
Description-Content-Type: text/markdown
Requires-Dist: reflex >=0.4.2
Provides-Extra: dev
Requires-Dist: build ; extra == 'dev'
Requires-Dist: twine ; extra == 'dev'

# img-comparison-slider

A Reflex custom component img-comparison-slider.

## Installation

```bash
pip install reflex-img-comparison-slider
```

## Usage

```python
import reflex as rx
from reflex_img_comparison_slider import img_comparison_slider


def index() -> rx.Component:
    return rx.center(
        rx.vstack(
            rx.heading("Image Comparison Slider", size="7"),
            img_comparison_slider(
                rx.image(src="/green-leaves.webp", slot="first"),
                rx.image(src="/green-leaves-blurred.webp", slot="second"),
            ),
            align="center",
            spacing="7",
        ),
        height="100vh",
    )
```

### Slider Props

| Name       | Key          | Values                               | Description                                                              |
|------------|--------------|--------------------------------------|--------------------------------------------------------------------------|
| Position   | `value`      | `int`                        | Position of the divider in percents. Must be between 0 and 100. (default: 50) |
| Hover      | `hover`      | `bool`                       | Automatically slide on mouse over. (default: False)                      |
| Direction  | `direction`  | `"vertical", "horizontal"`           | Direction of the slider. (default: "horizontal")                         |
| Keyboard   | `keyboard`   | `"enabled", "disabled`            | Enable/disable slider position control with the keyboard. (default: enabled) |
| Handle     | `handle`     | `bool`                       | Enable/disable dragging by handle only. (default: False)                 |
