01compare-two-image.css

.input-file{
  display: block;
  margin: 16px 0;
}
.message{
  padding-left: 12px;
  color: red;
}
.img-preview{
  width: 100px;
}
/*  */
#slide-outer{
  box-sizing: border-box;
  height: 85vh;
  position: relative;
  border: 1px solid #9E9E9E;
  user-select: none;
}
.slide-unit{
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-color: #fff;
}
.img-slide{
	user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
  pointer-events: none;
}
#slideA{
  width: 50%;
  z-index: 2;
}
#slideB{
  z-index: 1;
}
#slidebar{
  box-sizing: border-box;
  width: 4px;
  height: 100%;
  position: absolute;
  z-index: 3;
  border: #fff solid;
  border-width: 0 1px;
  background-color: #616161;
  cursor: col-resize;
}
.bt-slide{
  position: absolute;
  bottom: 4px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
}
#bt-slide-left{
  left: 4px;
}
#bt-slide-right{
  right: 4px;
}
/*  */
.switch-outer{
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 85vh;
  border: 1px solid #9E9E9E;
}
.switch-box{
  flex-grow: 1;
  position: relative;
}
.img-switch{
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  background-color: #fff;
}
#switchA{
  z-index: 2;
}
#switchB{
  z-index: 1;
}
#bt-switch{
  display: block;
  padding: 4px 12px;
  margin: 8px auto;
  cursor: pointer;
  user-select: none;
}

02compare-two-image.html

<h3>画像読み込み</h3>
<input type="file" class="input-file">
<div class="message"></div>
<input type="file" class="input-file">
<div class="message"></div>
<div class="preview-box">
  <img src="" alt="" class="img-preview">
  <img src="" alt="" class="img-preview">
</div>

<h3>スライド比較</h3>
<div id="slide-outer">
  <div id="slideA" class="slide-unit">
    <img src="" alt="" class="img-slide">
  </div>
  <div id="slideB" class="slide-unit">
    <img src="" alt="" class="img-slide">
  </div>
  <div id="slidebar"></div>
  <button id="bt-slide-left" class="bt-slide">←</button>
  <button id="bt-slide-right" class="bt-slide">→</button>
</div>

<h3>スイッチ比較</h3>
<div class="switch-outer">
  <div class="switch-box">
    <img src="" alt="" id="switchA" class="img-switch">
    <img src="" alt="" id="switchB" class="img-switch">
  </div>
  <div class="switch-control">
    <button id="bt-switch">比較</button>
  </div>
</div>

03compare-two-image.js

//画像読み込み
const input_file = document.getElementsByClassName('input-file');
const message = document.getElementsByClassName('message');
const img_preview = document.getElementsByClassName('img-preview');
[...input_file].forEach((el,i)=>{
  el.addEventListener('change',e=>{
    fileCheck(e,i);
  });
});

//スライド比較
const slide_outer = document.getElementById('slide-outer');
const slideA = document.getElementById('slideA');
const img_slide = document.getElementsByClassName('img-slide');
const slidebar = document.getElementById('slidebar');
let slidebar_moving = false;

[...img_slide].forEach(img=>{
  img.onload = ()=>{imageResize(img)};
});

slidebar.style.transform = `translateX(${slide_outer.clientWidth/2}px)`;
slidebar.addEventListener('pointerdown',slidebarMoveStart);
slide_outer.addEventListener('pointermove',slidebarMove);
slide_outer.addEventListener('pointerup',slidebarMoveEnd);
slide_outer.addEventListener('pointerleave',slidebarMoveEnd);

const bt_slide_left = document.getElementById('bt-slide-left');
const bt_slide_right = document.getElementById('bt-slide-right');
bt_slide_left.addEventListener('pointerdown',()=>{slideStart(-1)});
bt_slide_left.addEventListener('pointerup',()=>{slideEnd()});
bt_slide_left.addEventListener('pointerleave',()=>{slideEnd()});
bt_slide_right.addEventListener('pointerdown',()=>{slideStart(1)});
bt_slide_right.addEventListener('pointerup',()=>{slideEnd()});
bt_slide_right.addEventListener('pointerleave',()=>{slideEnd()});


//スイッチ比較
const img_switch = document.getElementsByClassName('img-switch');
const switchA = document.getElementById('switchA');
const bt_switch = document.getElementById('bt-switch');

bt_switch.addEventListener('pointerdown',switchOn);
bt_switch.addEventListener('pointerup',switchOff);
bt_switch.addEventListener('pointerleave',switchOff);

//サンプル画像読み込み
img_slide[0].src = '../img/sample01.jpg';
img_slide[1].src = '../img/sample01-2.jpg';
img_switch[0].src = '../img/sample01.jpg';
img_switch[1].src = '../img/sample01-2.jpg';

//関数
function fileCheck(e,i){
  message[i].textContent = '';
  const files = e.target.files;
  if(files.length==0){
    return;
  }
  img_preview[i].src = '';
  if(files[0].type.indexOf('image')==-1){
    e.target.value = '';
    message[i].textContent = '画像ファイルを選択してください。';
    return;
  }
  const reader = new FileReader();
  reader.onload = ev=>{
    img_preview[i].src = ev.target.result;
    img_slide[i].src = ev.target.result;
    img_switch[i].src = ev.target.result;
  }
  reader.readAsDataURL(files[0]);
}

function imageResize(img){
  const outer_w = slide_outer.clientWidth;
  const outer_h = slide_outer.clientHeight;
  const img_w = img.naturalWidth;
  const img_h = img.naturalHeight;
  const rate_outer = outer_h/outer_w;
  const rate_img = img_h/img_w;
  if(rate_outer>=rate_img){
    //width合わせ
    const new_h = (outer_w/img_w)*img_h;
    img.style.width = outer_w+'px';
    img.style.height = new_h+'px';
  }else{
    //height合わせ
    const new_w = (outer_h/img_h)*img_w;
    img.style.width = new_w+'px';
    img.style.height = outer_h+'px';
    img.style.transform = `translateX(${(outer_w-new_w)/2}px)`;
  }
}

function slidebarMoveStart(){
  slidebar_moving = true;
}

function slidebarMove(e){
  if(!slidebar_moving) return;
  const d = e.pageX - (window.pageXOffset + slide_outer.getBoundingClientRect().left);
  const x = (()=>{
    if(d<0){
      return 0;
    }else if(d>slide_outer.clientWidth){
      return slide_outer.clientWidth;
    }else{
      return d;
    }
  })();
  slidebar.style.transform = `translateX(${x}px)`;
  slideA.style.width = x+'px';
}

function slidebarMoveEnd(){
  slidebar_moving = false;
}

{
  let slidetimer;
  
  function slideStart(diff){
    slidetimer = setInterval(()=>{
      const d = slideA.clientWidth + diff;
      const x = (()=>{
        if(d<0){
          return 0;
        }else if(d>slide_outer.clientWidth){
          return slide_outer.clientWidth;
        }else{
          return d;
        }
      })();
      slidebar.style.transform = `translateX(${x}px)`;
      slideA.style.width = x+'px';
    },10);
  }

  function slideEnd(){
    clearInterval(slidetimer);
  }
}

function switchOn(){
  switchA.classList.add('hide');
}
function switchOff(){
  switchA.classList.remove('hide');
}