Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sneas/img-comparison-slider
Image comparison slider. Compare images before and after. Supports React, Vue, Angular.
https://github.com/sneas/img-comparison-slider
angular compare-images comparison-slider html image-comparison react slider vue web-component
Last synced: 14 days ago
JSON representation
Image comparison slider. Compare images before and after. Supports React, Vue, Angular.
- Host: GitHub
- URL: https://github.com/sneas/img-comparison-slider
- Owner: sneas
- License: mit
- Created: 2019-07-31T16:58:40.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-06T10:59:24.000Z (about 2 months ago)
- Last Synced: 2024-06-06T12:44:02.250Z (15 days ago)
- Topics: angular, compare-images, comparison-slider, html, image-comparison, react, slider, vue, web-component
- Language: TypeScript
- Homepage: https://img-comparison-slider.sneas.io
- Size: 45 MB
- Stars: 561
- Watchers: 8
- Forks: 44
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stenciljs - Image Comparison Slider - Slider component to compare images before and after (List of Awesome Components Made using StencilJS / Individual Components)
- my-awesome-stars - sneas/img-comparison-slider - Image comparison slider. Compare images before and after. Supports React, Vue, Angular. (TypeScript)
- awesome-stars - img-comparison-slider
README
# img-comparison-slider
[](https://www.npmjs.com/package/img-comparison-slider)
[](https://www.jsdelivr.com/package/npm/img-comparison-slider)
[](https://www.webcomponents.org/element/img-comparison-slider)
## Slider Component for Comparing Images (Before and After).
Usage examples: [https://img-comparison-slider.sneas.io/examples.html](https://img-comparison-slider.sneas.io/examples.html)
## Most Important Features
- Mobile friendly
- Accessible
- Responsive
- Compact - less than 12 kB minified (Or less than 4 kB if gzipped)
- Compatible with modern frameworks ([React](packages/react/README.md),
[Angular](docs/installation/angular.md),
[Vue2](docs/installation/vue.md),
[Vue3](packages/vue/README.md))
- Distributed via CDN or NPM
## Installation
### Browser Requirements
- Support for [ECMAScript 2015 (ES6)](https://caniuse.com/?search=es6). Use [Babel](https://babeljs.io/docs/en/babel-preset-env) if needed.
- Support for [Custom Elements (V1)](https://caniuse.com/?search=custom%20elements%20v1) and [ShadowDOM (V1)](https://caniuse.com/?search=shadowdom%20v1). Use [Polyfills](https://www.webcomponents.org/polyfills) if support for older browsers is needed.
- Support for [CSS Variables (Custom Properties)](https://caniuse.com/?search=css%20custom%20properties). [Polyfill](https://github.com/nuxodin/ie11CustomProperties) it for IE11.
### HTML
```html
```
### Frameworks Support
- [React](packages/react/README.md)
- [Angular](docs/installation/angular.md)
- [Vue2](docs/installation/vue.md)
- [Vue3](packages/vue/README.md)
## Supported Attributes
Besides the default `HTMLElement` attributes such as `class`, `tabindex`, `title`, etc., `img-comparison-slider` supports:
| Attribute | Description | Default | Available |
| ----------- | --------------------------------------------------------- | ------------ | ------------------------ |
| `value` | Position of the divider in percents. | `50` | `0..100` |
| `hover` | Automatically slide on mouse over. | `false` | |
| `direction` | Set slider direction. | `horizontal` | `horizontal`, `vertical` |
| `nonce` | Define nonce which gets passed to inline style. | | |
| `keyboard` | Enable/disable slider position control with the keyboard. | `enabled` | `enabled`, `disabled` |
| `handle` | Enable/disable dragging by handle only. | `false` | `true`, `false` |
## Events
The component emits `slide` event when the slider position is changed by user.
## Styling
Some styling techniques and ideas can be found in [examples](https://img-comparison-slider.sneas.io/examples.html).
The component elements like the default handle or the separator line could be styled using CSS3 variables.
Example:
```html
img-comparison-slider {
--divider-width: 2px;
--divider-color: #c0c0c0;
--default-handle-opacity: 0.3;
}
```
### Available Variables
| Variable | Description | Default value | Example value |
| -------------------------- | ---------------------------------------------------------------------------------------- | ------------- | -------------------------------- |
| `--divider-width` | Width of the vertical line separating both images | `1px` | `1em` |
| `--divider-color` | Color of the vertical line separating the two images | `#fff` | `rgba(0, 0, 0, 0.5)` |
| `--divider-shadow` | Shadow cast by the vertical line separating the two images | `none` | `0px 0px 5px rgba(0, 0, 0, 0.5)` |
| `--handle-position-start` | Handle position on the divider axis. In case the handle must be displaced off the center | `50%` | |
| `--default-handle-width` | Width of the default handle | `50px` | |
| `--default-handle-color` | Color of the default handle | `#fff` | `rgba(0, 0, 0, 0.5)` |
| `--default-handle-opacity` | Opacity of the default handle | `1` | `0.3` |
| `--default-handle-shadow` | Shadow cast by the default handle | `none` | `0px 0px 5px rgba(0, 0, 0, 1)` |
### Handle
The handle of the component can be changed by assigning the attribute `slot="handle"` to any element within `img-comparison-slider`.