https://github.com/9am/before-after
A small Web Component shows a before-after comparison. 🌓
https://github.com/9am/before-after
before-after comparison custom-element slide web-component
Last synced: 28 days ago
JSON representation
A small Web Component shows a before-after comparison. 🌓
- Host: GitHub
- URL: https://github.com/9am/before-after
- Owner: 9am
- License: mit
- Created: 2023-12-20T07:38:17.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-22T02:33:51.000Z (over 1 year ago)
- Last Synced: 2025-04-06T23:07:27.323Z (6 months ago)
- Topics: before-after, comparison, custom-element, slide, web-component
- Language: HTML
- Homepage: https://9am.github.io/before-after/
- Size: 47.9 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
<before-after>
A small Web Component shows a before-after comparison. 🌓
## Demo
Go to the [Home page](https://9am.github.io/before-after/).
## Usage
Include via CDN(e.g. unpkg) or Download a copy
```html
BEFORE
AFTER
```
Or import the ESM version
```html
import 'https://unpkg.com/@9am/before-after/dist/index.es.js';
```
Or install via npm
```sh
npm install @9am/before-after
```
## Documentation
### Attributes
| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `varient` | linear \| radial \| conic
repeating-linear \| repeating-radial \| repeating-conic | `linear` | The varient. |
| `orient` | horizontal \| vertical | `horizontal` | The orientation. |
| `value` | number | `50` | The position of the thumb bar. (0-100) |
### CSS Properties
| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `--position` | css gradient params before `` | linear: `to left`
radial: `circle at center`
conic: `at center` | The control for how the mask behaves. |
| `--repeat` | number | `6` | The repeat times for `repeating-` varients. |
| `--thumb-size` | css size | `1px` | The thumb size. |
| `--thumb-color` | css color | `white` | The thumb color. |
## License
[MIT](LICENSE)