jQuery compare slider

Toggle class name on click in jQuery

by ponyspy

HTML

<div class="img-comp-container">
        <div class="img-comp-slider"></div>
        <div class="img-comp-responsive">
            <div class="img-comp-img">
                <img src="https://images.unsplash.com/photo-1531902706636-a9966c06605a?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=cf8d36da7e1b4717afdd2b9a2569ff53" />
            </div>
            <div class="img-comp-img img-comp-overlay">
                <img src="https://images.unsplash.com/photo-1536054865251-fa7b4b39c264?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2675739fa4b8c231e25377cf9498772" />
            </div>
        </div>
    </div>

CSS

.img-comp-container {
    position: relative;
    height: auto;
    width: 100%;
}

.img-comp-responsive {
    height: 0;
    width: 100%;
    padding-bottom: 75%;
}

.img-comp-img {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.img-comp-img img {
    width: auto;
    height:100%;
    display: block;
    vertical-align: middle;
}

.img-comp-overlay {
    width: 50%;
}
.img-comp-slider {
    position: absolute;
    z-index: 9;
    cursor: ew-resize;
    width: 2px;
    height: 100%;
    background-color: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.img-comp-slider:before {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  top: 50%;
  left: 0;
  position: relative;
  transform: translate(-12px, -50%);
  outline: 2px solid white;
}

JavaScript

function maxVal(val, itsmax) {
    if (val <= itsmax && val >= 0) return val;
    else if (val < 0) return 0;
    else return itsmax;
}

$('.img-comp-overlay').each(function() {
    var $slider = $(this).parents('.img-comp-container').find('.img-comp-slider');
    var $img = $(this).find('img');

    //Mouse was pressed
    $slider.on('mousedown', function(e) {
        e.preventDefault();

        $(window).on('mousemove.slideev', this, function(e) {
            var x = $img.offset().left;
            var position = maxVal(e.pageX - x, $('.img-comp-img').width());

            $img.parent().width(position);
            $slider.css('left', position + 'px');
        });
    });

    $(window).on('mouseup', function(e) {
        e.preventDefault();

        $(window).off('mousemove.slideev');
    });

    //Finger is swiping
    $slider.on('touchmove', function(e) {
        e.preventDefault();

        var t = e.touches[0];
        var x = $img.offset().left;
        var position = maxVal(t.pageX - x, $('.img-comp-img').width());

        $img.parent().width(position);
        $slider.css('left', position + 'px');
    })
});