Responsive Image Comparison Slider Using React, Vue, Angular

responsive-image-comparison-slider

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

VariableDescriptionDefault valueExample value
--divider-widthWidth of the vertical line separating both images1px1em
--divider-colorColor of the vertical line separating the two images#fffrgba(0, 0, 0, 0.5)
--divider-shadowShadow cast by the vertical line separating the two imagesnone0px 0px 5px rgba(0, 0, 0, 0.5)
--default-handle-widthWidth of the default handle50px 
--default-handle-colorColor of the default handle#fffrgba(0, 0, 0, 0.5)
--default-handle-opacityOpacity of the default handle10.3
--default-handle-shadowShadow cast by the default handlenone0px 0px 5px rgba(0, 0, 0, 1)

Supported Attributes

Besides the default HTMLElement attributes such as classtabindextitle, etc., img-comparison-slider supports:

AttributeDescriptionDefaultAvailable
valuePosition of the divider in percents.500..100
hoverAutomatically 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.