Accessible Image Comparison Component – Split View

Category: Image | October 2, 2020
Author: onion2k
Views Total: 51 views
Official Page: Go to website
Last Update: October 2, 2020
License: MIT

Preview:

Accessible Image Comparison Component – Split View

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;
}

You Might Be Interested In:


Leave a Reply