Qualis Slider
Before / After widget for real estate portals. No dependencies, ~10 KB, works anywhere with two lines of HTML.
By Qualis Studio · GitHub
Try it with your own photos
Original photo
Click or drag to upload
Staging photo
Click or drag to upload
Live preview
All modes — example
Slider
Fade
Toggle
<div class="qualis-slider"
data-before="original.jpg"
data-after="staging.jpg"
data-label-before="Original"
data-label-after="Staging"
data-color="#1D9E75"
data-icon="arrows">
</div>
<div class="qualis-slider"
data-mode="fade"
data-before="original.jpg"
data-after="staging.jpg"
data-color="#378ADD">
</div>
<div class="qualis-slider"
data-mode="toggle"
data-before="original.jpg"
data-after="staging.jpg"
data-label-before="Original"
data-label-after="Staging"
data-color="#D85A30"
data-icon="eye">
</div>
Install
<!-- Add once to your <head> -->
<script src="https://cdn.jsdelivr.net/gh/luxbase/qualis-slider@latest/dist/widget.js"></script>
<!-- Use anywhere -->
<div class="qualis-slider"
data-before="original.jpg"
data-after="staging.jpg">
</div>