Image comparison slider

Simple web component that takes an original image src and a modified image src and creates a comparison component between the two images complete with a draggable slider.

Currently you the slider is only horizontal and you can only set the color of the draggable handle element via divider-color on the element. The component is an MVP for use at my office.

Further development will happen once i get the time!

Using the web component on your own site

You can include the component via script tag or node_modules as described below.

Script tag

Put this script tag (<script src="https://unpkg.com/[email protected]/dist/ptx-image-comparison.js"></script>) in the head of your index.html file. Then you can use the element anywhere in your template, JSX, html etc.

Node modules

1. Run npm install ptx-image-comparison --save
2. Put a script tag similar to this (<script src="node_modules/ptx-image-comparison/dist/ptx-image-comparison.js"></script>) into the head of your index.html
3. Use the element anywhere in your template, JSX, html etc.

Need help? Check out our docs here.

Usage

Preview

<ptx-image-comparison original="path/to/original-image.png" modified="path/to/modified-image.png" divider-color="#000"></ptx-image-comparison>

Change color of the divider & handle

You can change the color of the slider handle and the arrows using the divider-color attribute on the element.