# 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) |
Raw data
{
"_id": null,
"home_page": null,
"name": "reflex-img-comparison-slider",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "reflex, reflex-custom-components",
"author": null,
"author_email": "Carlos <carlbrownson@proton.me>",
"download_url": "https://files.pythonhosted.org/packages/41/73/a62ca5eec785c76d33ebe7a9bba33b2a3830e1d2b8165dc2aba7646ec5a8/reflex_img_comparison_slider-0.0.1.tar.gz",
"platform": null,
"description": "# img-comparison-slider\n\nA Reflex custom component img-comparison-slider.\n\n## Installation\n\n```bash\npip install reflex-img-comparison-slider\n```\n\n## Usage\n\n```python\nimport reflex as rx\nfrom reflex_img_comparison_slider import img_comparison_slider\n\n\ndef index() -> rx.Component:\n return rx.center(\n rx.vstack(\n rx.heading(\"Image Comparison Slider\", size=\"7\"),\n img_comparison_slider(\n rx.image(src=\"/green-leaves.webp\", slot=\"first\"),\n rx.image(src=\"/green-leaves-blurred.webp\", slot=\"second\"),\n ),\n align=\"center\",\n spacing=\"7\",\n ),\n height=\"100vh\",\n )\n```\n\n### Slider Props\n\n| Name | Key | Values | Description |\n|------------|--------------|--------------------------------------|--------------------------------------------------------------------------|\n| Position | `value` | `int` | Position of the divider in percents. Must be between 0 and 100. (default: 50) |\n| Hover | `hover` | `bool` | Automatically slide on mouse over. (default: False) |\n| Direction | `direction` | `\"vertical\", \"horizontal\"` | Direction of the slider. (default: \"horizontal\") |\n| Keyboard | `keyboard` | `\"enabled\", \"disabled` | Enable/disable slider position control with the keyboard. (default: enabled) |\n| Handle | `handle` | `bool` | Enable/disable dragging by handle only. (default: False) |\n",
"bugtrack_url": null,
"license": "Apache-2.0",
"summary": "Reflex custom component img-comparison-slider",
"version": "0.0.1",
"project_urls": null,
"split_keywords": [
"reflex",
" reflex-custom-components"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "4708a893450ea783f9738044743a7e9587a194e0b6fe94bd54ab77ebe5a59b93",
"md5": "a58e744dcad4206f69788f80d62090a4",
"sha256": "0938cf9b8f742592455ad2bb0a0a59a4cc0013241ce69316b048f6acc823bfb5"
},
"downloads": -1,
"filename": "reflex_img_comparison_slider-0.0.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "a58e744dcad4206f69788f80d62090a4",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 2934,
"upload_time": "2024-05-28T10:24:07",
"upload_time_iso_8601": "2024-05-28T10:24:07.730930Z",
"url": "https://files.pythonhosted.org/packages/47/08/a893450ea783f9738044743a7e9587a194e0b6fe94bd54ab77ebe5a59b93/reflex_img_comparison_slider-0.0.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "4173a62ca5eec785c76d33ebe7a9bba33b2a3830e1d2b8165dc2aba7646ec5a8",
"md5": "d4695ce9b7204531ae076dab719aad43",
"sha256": "d1715ee4e2938b5d431b81c37ce0dee72e42afff0793c8cfcc7c4f205f883159"
},
"downloads": -1,
"filename": "reflex_img_comparison_slider-0.0.1.tar.gz",
"has_sig": false,
"md5_digest": "d4695ce9b7204531ae076dab719aad43",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 2440,
"upload_time": "2024-05-28T10:24:09",
"upload_time_iso_8601": "2024-05-28T10:24:09.826805Z",
"url": "https://files.pythonhosted.org/packages/41/73/a62ca5eec785c76d33ebe7a9bba33b2a3830e1d2b8165dc2aba7646ec5a8/reflex_img_comparison_slider-0.0.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-05-28 10:24:09",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "reflex-img-comparison-slider"
}
JSON