The Image Comparison (Before and After) slider component is a responsive, accessible, touch-enabled Vue slider component for comparing before and after images on your app.
image comparison slider, responsive image comparison slider, react image comparison slider, react before after slider, image comparison js library, vue compare image
Most Important Features
- Mobile friendly
- Accessible
- Responsive
- Compact – less than 9 kB minified (Or less than 3 kB if gzipped)
- Compatible with modern frameworks (React, Angular, Vue2, Vue3)
- Distributed via CDN or NPM
How to make use of it:
1. Import and record image comparison slider.
import Vue from 'vue';
import App from './App.vue';
import {
applyPolyfills,
defineCustomElements,
} from 'img-comparison-slider/loader';
Vue.config.productionTip = false;
// Tell Vue to ignore all components defined in the test-components
// package. The regex assumes all components names are prefixed
// 'test'
Vue.config.ignoredElements = [/test-\w*/];
// Bind the custom elements to the window object
applyPolyfills().then(() => {
defineCustomElements(window);
});
new Vue({
render: (h) => h(App),
}).$mount('#app');2. Add before/after images to the image comparison slider component.
<img-comparison-slider> <img slot="before" width="100%" src="before.jpg"> <img slot="after" width="100%" src="after.jpg"> </img-comparison-slider>
3. Customize slider styles as follows:
.slider-example {
--handle-opacity: 0.5;
--handle-opacity-active: 0.5;
--handle-size: 60px;
--divider-width: 4px;
--divider-color: #ffa658;
/* ... */
}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) |
--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) |
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 |
Slider Component For Comparing Images, img comparison slider Plugin/Github, nuxt image slider
See Demo And Download
Official Website(sneas): Click Here
This superior jQuery/javascript plugin is developed by sneas. For extra Advanced Usages, please go to the official website.