.cmp_wrapper{
    position: relative;
    /*height: 600px; commented out as it will been specified by the html
    width: 800px;*/
    overflow: hidden;
    background: #fff;
    border: 7px solid #fff;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
}
.cmp_wrapper .images{
    height: 100%;
    width: 100%;
    display: flex;
}
.cmp_wrapper .images .img-right{
    height: 100%;
    width: 100%;
    /* background: url("image1.jpg") no-repeat; */
}
.cmp_wrapper .images .img-left{
    position: absolute;
    height: 100%;
    width: 50%;
    /* background: url("image2.jpg") no-repeat; */
}
.cmp_wrapper .cmp_slider{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}
.cmp_wrapper .cmp_slider input{
    width: 100%;
    outline: none;
    background: none;
    -webkit-appearance: none;
}
.cmp_slider input::-webkit-slider-thumb{
    height: 1080px; /* can't adjust psuedo elements, so make height extra large */
    width: 3px;
    background: none;
    -webkit-appearance: none;
    cursor: col-resize;
}
.cmp_slider input::-moz-range-thumb{
    height: 2400px; /* can't adjust psuedo elements, so make height extra large */
    width: 3px;
    background: none;
    /*-moz-appearance: none;*/
    border: none; /* sometimes commented out because it's sometimes handy to be able to see the thumb in Mozilla since it isn't always where it's supposed to be */
    cursor: col-resize;
}

.cmp_slider .drag-line{
    width: 3px;
    height: 1200px; /* can't adjust psuedo elements, so make height extra large */
    position: absolute;
    left: 49.85%;
    pointer-events: none;
}
.cmp_slider .drag-line::before,
.cmp_slider .drag-line::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 40px; /* needs to be half the image height - 42 for the thumb*/
    background: #fff;
}
.cmp_slider .drag-line::before{
    bottom: calc(50% + 20px);
    height: 600px;
}
.cmp_slider .drag-line::after{
    top: calc(50% + 20px);
    height: 600px;
}
.cmp_slider .drag-line span{
    height: 42px;
    width: 42px;
    border: 3px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.cmp_slider .drag-line span::before,
.cmp_slider .drag-line span::after{
    position: absolute;
    content: "";
    top: 50%;
    border: 10px solid transparent;
    border-bottom-width: 0px;
    border-right-width: 0px;
    transform: translate(-50%, -50%) rotate(45deg);
}
.cmp_slider .drag-line span::before{
    left: 40%;
    border-left-color: #fff;
}
.cmp_slider .drag-line span::after{
    left: 60%;
    border-top-color: #fff;
}