JSFiddle - React, Tailwind, and code Playground

jQuery UI Image Comparison Slider

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<h1>Image Comparison Slider</h1>
<div class="con">
    <img src="http://placehold.it/609x325/444444/ffffff" class="imageOne" />
  <div class="coverImage"></div>
  <div class="handle"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);

body {
  background: #222;
  font-family:'Lato', sans-serif;
}
h1 {
  font-weight: 100;
  color: #fff;
  text-align: center;
}
.con {
  width: 562px;
  height: 300px;
  border: 2px solid ;
  position: relative;
  margin: auto;
}
.con img {
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.coverImage {
  position: absolute;
  background: url("http://placehold.it/609x325/666666/ffffff");
  background-size: auto 100%;
  width: 50%;
  height: 100%;
}
.handle {
  width: 0px;
  height: 100%;
  border-left: 12px solid #fff;
  position: absolute;
  left: 50%;
}
.handle:after {
  content: "DRAG";
  display: block;
  width: 60px;
  height: 60px;
  border: 2px solid #eee;
  border-radius: 50%;
  color: #999;
  line-height: 60px;
  font-weight: 300;
  text-align: center;
  background: #fff;
  position: absolute;
  left: -36px; top: 0; bottom: 0;
  margin: auto;
}

JavaScript

$(".handle").draggable({ 
  axis: "x",
  containment: "parent",
  drag: function() {
    var position = $(this).position();
    var positionExtra = position.left + 6;
    $(".coverImage").width(positionExtra + "px");
  }
});