Accessible Image Comparison Component – Split View

Category: Image | October 2, 2020
Views Total:193 views
Official Page:Go to website
Last Update:October 2, 2020


Accessible Image Comparison Component – Split View


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-label="Comparing day and night images" 
  slider-label="Slide me left and right to compare images">
  <picture slot="top">
    <img src="1.jpg" />
  <picture slot="bottom">
    <img src="2.jpg" />

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

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

You Might Be Interested In:

Leave a Reply