Spectre Comparison sliders

Last Updated : 26 Jul, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <strong>Spectre Comparison Slider</strong> 
        <br><br> 
        <div class="comparison-slider"> 
            <figure class="comparison-before"> 
                <img class="img-responsive rounded" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png"
                     style="height: 100%"> 
                <div class="comparison-label">Famous till 2016</div> 
            </figure> 
          
            <figure class="comparison-after"> 
                <img class="img-responsive rounded" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182303/ReactJS-Tutorial.png"
                   style="height: 100%"> 
                <div class="comparison-label">After 2016</div> 
                <textarea class="comparison-resizer" readonly></textarea> 
            </figure> 
        </div> 
    </center> 
</body> 
</html>

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <strong>Spectre Comparison Slider</strong> 
        <br><br> 
        <div class="comparison-slider"> 
          <figure class="comparison-after"> 
            <img class="img-responsive rounded" 
                   src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182303/ReactJS-Tutorial.png"
                   style="height: 100%"> 
            <textarea class="comparison-resizer" ></textarea> 
          </figure> 
        </div> 
    </center> 
</body> 
</html>