Spectre Comparison sliders

The Spectre Comparison slider is an image comparison slider that essentially aids in the distinction of two photographs or products. As a result, the user can quickly determine which of the two products or two images are better. In this article, we will create that with ease with the Spectre classes.

Spectre Comparison sliders:

• comparison-slider: This class is used to wrap both the images one above another.
• comparison-before: This class holds the first (before) image of the slider.
• comparison-label: This class is used to display the label of the image that can be anything in text format.
• comparison-after: This class holds the second (after) image of the slider.
• comparison-resizer: This class is used to create the slider effect between two images.

Syntax:

<div class="comparison-slider">
 <figure class="comparison-before">
 ...
 <div class="comparison-label">..</div>
 </figure>
 <figure class="comparison-after">
 ...
 <div class="comparison-label">..</div>
 <textarea class="comparison-resizer"></textarea>
 </figure>
</div>

Example 1: In this example, we will create a two-image comparison interface.

Output:

Example 2: We can also use this feature as a drawer image. In this example, we will create a drawer image effect, by using only the comparison-after class.

Output:

Reference:https://picturepan2.github.io/spectre/experimentals/comparison.html#comparison