Skip to content
DocumentationExamples
← All components
MODULE 05

Before / After

A labeled native range control reveals two versions of the same composition.

Open demo ↗
Before After
HTML source & reuse instructions

Load Bootstrap, Versa CSS/JS, and your custom layer. Give every copied ID a unique value and update its matching references. 


<div data-lab-compare="">
<div class="lab-compare">
<div>
<div aria-label="Illustrative website layout: After the transformation" class="lab-art art-1" role="img">
<div class="art-window">
<div class="art-dots">
            ● ● ●
           </div>
<div class="art-layout">
<div>
<small>
              MAKE SOMETHING GREAT
             </small>
<strong>
              After the transformation
             </strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
</div>
<div class="lab-before">
<div aria-label="Illustrative website layout: After the transformation" class="lab-art art-1" role="img">
<div class="art-window">
<div class="art-dots">
            ● ● ●
           </div>
<div class="art-layout">
<div>
<small>
              MAKE SOMETHING GREAT
             </small>
<strong>
              After the transformation
             </strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
</div>
<span class="compare-label before-label">
         Before
        </span>
<span class="compare-label after-label">
         After
        </span>
</div>
<label class="d-block mt-3">
        Reveal after image:
        <output>
         50%
        </output>
<input aria-label="Percentage of after image visible" class="form-range" max="100" min="0" type="range" value="50"/>
</label>
</div>