Home
Image
Slider Component For Comparing Images

Slider Component For Comparing Images

sneas First listed on February 19, 2023
Live Demo Download Source Code

Install & Download:

Description:

A responsive, accessible, touch-enabled Vue slider component for comparing before & after images on your app.

How to use it:

1. Import and register the 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 the slider styles as follows:

.slider-example {
  --handle-opacity: 0.5;
  --handle-opacity-active: 0.5;
  --handle-size: 60px;
  --divider-width: 4px;
  --divider-color: #ffa658;
  /* ... */ 
}

Preview:

Slider Component For Comparing Images

Changelog:

v8.0.0 (02/19/2023)

  • The default on-focus outline of the component now looks identical in both Chrome and Safari.

v7.8.2 (02/12/2023)

  • bugfixes

v7.8.0 (10/16/2022)

  • handle attribute

v7.7.1 (08/06/2022)

  • Bugfix: immediate direction change when using keyboard

v7.7.0 (08/04/2022)

  • –handle-position-start css variable for moving the handle along the divider axis

v7.6.0 (04/28/2022)

  • disable keyboard with the keyboard=disabled attribute

v7.5.2 (03/16/2022)

  • Bug Fixes

v7.5.1 (03/03/2022)

  • Bug Fixes

v7.4.3 (01/10/2022)

  • disable rendering optimization in safari

v7.4.2 (01/09/2022)

  • Bug Fixes: speed-up performance with will-change

v7.4.1 (01/05/2022)

  • Bug Fixes

v7.4.0 (12/27/2021)

  • allow nonce attribute for the component style tag

v7.3.2 (11/05/2021)

  • allow first slot height to be 100%

v7.3.1 (11/03/2021)

  • vue: properly import ImgComparisonSlider into the Vue app

v7.3.0 (10/04/2021)

  • slide event

v7.2.0 (09/02/2021)

  • slide on mouseover

v7.1.3 (08/01/2021)

  • avoid cumulative layout shift

v7.1.2 (08/01/2021)

  • fixd: chromium warning for non-passive scroll-blocking event listener

v7.1.1 (07/14/2021)

  • Bug Fixes

v7.1.0 (07/03/2021)

  • feat: value respects strings

v7.0.2 (06/30/2021)

  • Bugfixed onFocus outline in Chrome

v7.0.1 (06/29/2021)

  • Bugfixed element focus

v7.0.0 (06/29/2021)

  • Shadow on arrows has been removed by default due to the component’s performance concerns

v6.1.3 (06/28/2021)

  • Bug Fixes

v6.1.1 (06/26/2021)

  • Bug Fixes

v6.1.0 (06/25/2021)

  • arbitrary HTML in first and second slots

v6.0.0 (06/19/2021)

  • Fixed: component acts the same on dir=rtl

v5.0.2 (06/18/2021)

  • Bug Fixes

v5.0.0/1 (06/14/2021)

  • Fixed divider line in the middle of handle
  • Added arbitrary handle

v4.0.2 (06/07/2021)

  • fixed: size: exclude css source maps from output

v4.0.1 (06/06/2021)

  • build: npmignore unnecessary files and folders

v4.0.0 (06/05/2021)

  • Bug Fixes: respect dynamically loaded images and slot changes
  • Copy assets to dist
  • Rewrite component with vanilla js
  • Generate typings and export reset function
  • CSS initials styles get included from dist/styles.css
  • Main component file has been changed to dist/index.js

v3.0.4 (05/02/2021)

  • properly handle out-of-the-component mouse movements

v3.0.3 (03/28/2021)

  • consider page horizontal scoll position when calculating slider offset

v3.0.2 (03/13/2021)

  • keep divider line within images

More Like This

Tags:

Add Comment