Component Request - Image Comparison Slider

[sbmadhav]

Image Comparison Slider Component

The component has the following elements:

• Title:

1. The Components needs to have a configurable Title section

• Image Set:

1. 2 Images are required.
2. Each image will fill the parent container. The image scales proportionally (the aspect ratio is locked).

• Slider Control :

1. The slider can be configured for horizontal comparison, or vertical comparison (the left image becomes the top image).
2. The default starting position of the slider should be configurable for each instance and each viewport. (The starting positions can be 1/4, 1/2, 3/4).

• Image Label :

1. Need Labels for each image.
   • Label display position:
     • Large view: Displays at the bottom corners for horizontal comparison, and at the left corners for vertical comparison.
     • Medium and Small views: For both horizontal and vertical comparison, displays at the bottom occupying the full width of the container. Only one image label is displayed at at a time (the name changes from that of image A to that of image B when the slider passes the 50% mark).

• Slider Behavior:

1. On dragging the slider, display image A when the slider is dragged to the right/bottom, and image B when the slider is dragged to the left/top.
2. On clicking: When the user clicks/taps on any point of an image, the slider glide animates to that point.
3. Default positions for the slider will be set, but this should be configurable.

• Responsive Behavior:

1. The component must exhibit fluid response.