<div class="ba-slider">
<img src="http://kdkl.bplaced.net/Portrait/NACHER_2-NEU.jpg" alt="after">
<div class="resize">
<img src="http://kdkl.bplaced.net/Portrait/VORHER_2.jpg" alt="before">
</div>
<span class="handle"></span>
</div>
@import "lesshat";
@import "https://fonts.googleapis.com/css?family=Roboto:100, 500";
html,
body {
background-color: black;
height: auto;
overflow-x: hidden;
}
.ba-slider {
position: relative;
overflow: hidden;
height: auto;
}
.ba-slider img {
width: 100%;
display: block;
}
.resize {
position: absolute;
top: 0;
left: 0;
width: 50%;
overflow: hidden;
}
.handle {
/* Thin line seperator */
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
margin-left: -2px;
border: 1px;
background: white;
cursor: ew-resize;
}
.handle:after {
/* Big orange knob */
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin: -50px/2 0 0 -54px/2;
background: black;
border: 2px solid white;
content: "<>";
color: white;
font-family: sans-serif;
font-weight: 100;
font-size: 30px;
text-align: center;
line-height: 45px;
border-radius: 100%;
transition: all 0.3s ease;
}
.draggable:after {
width: 40px;
height: 40px;
margin: -22px 0 0 -22px;
line-height: 40px;
font-size: 20px;
}
View Compiled
// Call & init
$(document).ready(function(){
$('.ba-slider').each(function(){
var cur = $(this);
// Adjust the slider
var width = cur.width()+'px';
cur.find('.resize img').css('width', width);
// Bind dragging events
drags(cur.find('.handle'), cur.find('.resize'), cur);
});
});
// Update sliders on resize.
// Because we all do this: i.imgur.com/YkbaV.gif
$(window).resize(function(){
$('.ba-slider').each(function(){
var cur = $(this);
var width = cur.width()+'px';
cur.find('.resize img').css('width', width);
});
});
function drags(dragElement, resizeElement, container) {
// Initialize the dragging event on mousedown.
dragElement.on('mousedown touchstart', function(e) {
dragElement.addClass('draggable');
resizeElement.addClass('resizable');
// Check if it's a mouse or touch event and pass along the correct value
var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
// Get the initial position
var dragWidth = dragElement.outerWidth(),
posX = dragElement.offset().left + dragWidth - startX,
containerOffset = container.offset().left,
containerWidth = container.outerWidth();
// Set limits
minLeft = containerOffset + 10;
maxLeft = containerOffset + containerWidth - dragWidth - 10;
// Calculate the dragging distance on mousemove.
dragElement.parents().on("mousemove touchmove", function(e) {
// Check if it's a mouse or touch event and pass along the correct value
var moveX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
leftValue = moveX + posX - dragWidth;
// Prevent going off limits
if ( leftValue < minLeft) {
leftValue = minLeft;
} else if (leftValue > maxLeft) {
leftValue = maxLeft;
}
// Translate the handle's left value to masked divs width.
widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
// Set the new values for the slider and the handle.
// Bind mouseup events to stop dragging.
$('.draggable').css('left', widthValue).on('mouseup touchend touchcancel', function () {
$(this).removeClass('draggable');
resizeElement.removeClass('resizable');
});
$('.resizable').css('width', widthValue);
}).on('mouseup touchend touchcancel', function(){
dragElement.removeClass('draggable');
resizeElement.removeClass('resizable');
});
e.preventDefault();
}).on('mouseup touchend touchcancel', function(e){
dragElement.removeClass('draggable');
resizeElement.removeClass('resizable');
});
}
This Pen doesn't use any external CSS resources.