How to make resizer bigger, (larger clickable area)?

Question

I have this code from a codepen: https://codepen.io/beben-koben/pen/JKzyf

body {
  background: rgb(17, 17, 17)
}

.image-slider {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.image-slider img {
  user-select: none;
  max-width: 400px;
}

.image-slider>div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25px;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal;
}

.image-slider>div:before {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  overflow: hidden;
  position: absolute;
  resize: horizontal;
  right: 3px;
  bottom: 3px;
  background-clip: content-box;
  background: linear-gradient(-45deg, black 50%, transparent 0);
  -webkit-filter: drop-shadow(0 0 2px black);
  filter: drop-shadow(0 0 2px black);
}

<center><br /><br /><br />
  <div class="image-slider">
    <div>
      <img src="https://2.bp.blogspot.com/-VUtyA1E1LXs/U-tG_FPz0UI/AAAAAAAAIHc/dXifHfeBCUQ/s1600/face-before.jpg" />
    </div>
    <img src="https://1.bp.blogspot.com/-bEQl5-KrxHY/U-tG9gPXbZI/AAAAAAAAIHU/JEI5b_YRpjY/s1600/face-after.jpg" />
  </div>
</center>

The only problem I have, is that the resize grabber is almost impossible to hit on smaller screens. I have seen comparison sliders where the grabber goes all the way up.

Is there a way to customize the clickable area?