/Comparison-Slider

Image Comparision Slider using HTML, CSS and JS

Primary LanguageHTMLMIT LicenseMIT

Image Comparison Slider

This project is a simple image comparison slider that allows you to compare two images side by side. You can drag the slider to reveal the before and after versions of the images. It also checks the aspect ratio of the images to ensure they are the same before allowing comparison.

Features

  • Compare two images side by side with a draggable slider.
  • Select 'before' and 'after' images from your device.
  • Check the aspect ratio of the selected images to ensure they are the same.
  • Provides visual feedback when images are selected and when aspect ratio requirements are not met.

Getting Started

  1. Clone this repository to your local machine:

    git clone https://github.com/mursalfk/Comparison-Slider.git

  2. Open the index.html file in your web browser to use the image comparison slider.

Usage

  1. Open the index.html file in your web browser.

  2. Click on the "Select 'After' Image" button to choose the 'after' image.

  3. Click on the "Select 'Before' Image" button to choose the 'before' image.

  4. Once both images are selected and their aspect ratios are verified, the "Show Difference" button will become visible.

  5. Click the "Show Difference" button to compare the two images using the slider.

  6. Drag the slider left or right to reveal more or less of the 'before' or 'after' image, respectively.

  7. To compare different images, you can repeat the process by clicking the "Select 'After' Image" and "Select 'Before' Image" buttons again.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements