slider-before-after
Version:
🔨 Lightweight and simple slider to present images in before / after style with no dependencies
39 lines (33 loc) • 1.14 kB
HTML
<html lang="en">
<head>
<title>slider-before-after</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../src/styles/main.css"/>
<link rel="stylesheet" href="../src/styles/custom-range-input.css"/>
<link rel="stylesheet" href="styles/main.css"/>
</head>
<body>
<h1>Demo • slider-before-after</h1>
<div class="slider-before-after">
<div class="slider-before-image">
<img src="https://placeskull.com/200/200/f04e8b" alt=""/>
</div>
<div class="slider-after-image">
<img src="https://placeskull.com/200/200/8D38C9" alt=""/>
</div>
<input type="range" class="slider-track"/>
</div>
<div class="slider-before-after">
<div class="slider-before-image">
<img src="https://placeskull.com/200/200/5CBB88" alt=""/>
</div>
<div class="slider-after-image">
<img src="https://placeskull.com/200/200/435466" alt=""/>
</div>
<input type="range" class="slider-track"/>
</div>
<script src="../src/scripts/slider-before-after.js"></script>
</body>
</html>