Features
-
Responsive Design:
-
Works on all screen sizes
-
Adjusts to container width while maintaining aspect ratio
-
Mobile-friendly touch support
-
-
Interactive Slider:
-
Vertical draggable handle with visual feedback
-
Smooth transitions during and after dragging
-
Default position at 50% on load
-
-
Visual Elements:
-
Clear "Before" and "After" labels
-
Handle with drag indicator (↔)
-
Properly styled with shadows and rounded corners
-
-
Performance:
-
Uses CSS transitions for smooth animations
-
Efficient event handling
-
No external dependencies (pure vanilla JS)
-
How to Use
-
Replace the placeholder image URLs with your actual image paths
-
Customize the styling (colors, sizes, etc.) in the CSS section as needed
-
The slider will automatically adjust to its container size
The implementation supports both mouse and touch events, making it fully functional on desktop and mobile devices.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f5f5;
padding: 20px;
}
.slider-container {
position: relative;
max-width: 800px;
width: 100%;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.slider-image {
display: block;
width: 100%;
height: auto;
user-select: none;
}
.before-image {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
overflow: hidden;
}
.before-image img {
height: 100%;
object-fit: cover;
}
.slider-handle {
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 100%;
background-color: white;
cursor: ew-resize;
z-index: 10;
transform: translateX(-50%);
transition: background-color 0.2s;
}
.slider-handle:hover {
background-color: #ddd;
}
.slider-handle::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
background-color: white;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.slider-handle::after {
content: "↔";
position: absolute;
top: 50%;
left: 50%;
font-size: 16px;
color: #333;
transform: translate(-50%, -50%);
}
.label {
position: absolute;
top: 20px;
padding: 8px 15px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
border-radius: 4px;
font-weight: bold;
z-index: 5;
pointer-events: none;
}
.label-before {
left: 20px;
}
.label-after {
right: 20px;
}
@media (max-width: 600px) {
.label {
font-size: 14px;
padding: 5px 10px;
top: 10px;
}
.label-before {
left: 10px;
}
.label-after {
right: 10px;
}
}
document.addEventListener('DOMContentLoaded', function() {
const sliderContainer = document.querySelector('.slider-container');
const beforeImage = document.querySelector('.before-image');
const sliderHandle = document.querySelector('.slider-handle');
const slider = document.querySelector('.slider-handle');
let isDragging = false;
// Set initial position to 50%
beforeImage.style.width = '50%';
slider.style.left = '50%';
// Desktop events
slider.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
// Mobile touch events
slider.addEventListener('touchstart', startDrag);
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
function startDrag(e) {
e.preventDefault();
isDragging = true;
slider.style.transition = 'none';
beforeImage.style.transition = 'none';
}
function drag(e) {
if (!isDragging) return;
e.preventDefault();
let clientX;
if (e.type === 'touchmove') {
clientX = e.touches[0].clientX;
} else {
clientX = e.clientX;
}
const containerRect = sliderContainer.getBoundingClientRect();
let position = ((clientX - containerRect.left) / containerRect.width) * 100;
// Constrain between 0% and 100%
position = Math.max(0, Math.min(100, position));
beforeImage.style.width = position + '%';
slider.style.left = position + '%';
}
function endDrag() {
isDragging = false;
slider.style.transition = 'left 0.3s ease';
beforeImage.style.transition = 'width 0.3s ease';
}
// Make responsive by recalculating on window resize
window.addEventListener('resize', function() {
const currentPercentage = parseFloat(beforeImage.style.width) || 50;
beforeImage.style.width = currentPercentage + '%';
slider.style.left = currentPercentage + '%';
});
});
إرسال تعليق
Thank you
Learning robo team