Accessible Image Comparison Component – Split View

Preview:

Description:

Split View is an easy, modern, and fully accessible image comparison component built using Vanilla JavaScript and HTML range input.

How to use it:

1. Download and import the Split View component.

<script src="./dist/split-view.js"></script>

2. Add the split-view component to the app and specify the path to the before & after images. Possible props:

• mode: Determine how the top and bottom layers are blended: ‘normal’, ‘screen’, etc.
• start: Starting position of the image comparison slider.
• split-view-label: aria-label value for the image comparison component
• slider-label: aria-label value for the component image comparison slider.

<split-view 
  mode="normal" 
  start=25 
  split-view-label="Comparing day and night images" 
  slider-label="Slide me left and right to compare images">
  <picture slot="top">
    <img src="1.jpg" />
  </picture>
  <picture slot="bottom">
    <img src="2.jpg" />
  </picture>
</split-view>

3. Don’t forget to specify the size of the split view.

split-view {
  width: 600px;
  height: 450px;
}