img-comparison-slider
Compare images before and after
img-comparison-slider
Slider component to compare images before and after.
Browsers support
![]() IE / Edge |
![]() Firefox |
![]() Chrome |
![]() Safari |
![]() iOS Safari |
![]() Samsung |
---|---|---|---|---|---|
IE11 (limited), Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Overview
This is the best comparison slider because it:
- Looks great on mobile devices
- Supports keyboard
- Responsive
- Works with plain HTML pages, React, Angular, or Vue
- Easy to install
- Lightweight ~7kb
- Zero dependencies
Installation
HTML
<script type="module" src="https://unpkg.com/img-comparison-slider@latest/dist/component/component.esm.js"></script>
<script nomodule="" src="https://unpkg.com/img-comparison-slider@latest/dist/component/component.js"></script>
<link rel="stylesheet" href="https://unpkg.com/img-comparison-slider@latest/dist/collection/styles/initial.css">
<img-comparison-slider>
<img slot="before" src="before.jpg">
<img slot="after" src="after.jpg">
</img-comparison-slider>
Frameworks support
Styling
The component could be styled with the help of CSS3 variables.
Example:
<style type="text/css">
img-comparison-slider {
--divider: 3px solid #c0c0c0;
--hint-opacity: 0.3;
}
</style>
Available variables
Variable | Description | Default value |
---|---|---|
--divider |
Vertical line dividing before and after image | 1px solid #d7d7d7 |
--hint-size |
Size of hint arrows at the middle of divider | 40px |
--hint-color |
Color of hint arrows at the middle of divider | #d7d7d7 |
--hint-opacity |
Opacity of hint arrows | 0.5 |
--hint-opacity-active |
On focus opacity of hint arrows | 0 |
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- Released
- 2019-08-25
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Browser
- Browser Independent