如何增大图片对比滑块resizer的可点击触发区域？

解决方案 #

你只需要修改CSS样式，将resize触发区域扩展为贯穿滑块全高即可，修改后的完整CSS如下：

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;
  /* 新增以下3行 */
  box-sizing: border-box;
  padding-right: 12px;
  cursor: ew-resize;
}

/* 新增webkit内核resizer样式，扩大触发区域 */
.image-slider>div::-webkit-resizer {
  border-width: 0;
  height: 100%;
  width: 12px;
  background: transparent;
}

/* 把原来的小三角改成全高拖动条 */
.image-slider>div:before {
  content: '';
  display: block;
  /* 修改宽高和位置 */
  width: 3px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
  /* 不阻挡点击事件，让点击透传到下层的resizer触发区域 */
  pointer-events: none;
}

修改说明 #

• 给可拖动的div添加了padding-right和box-sizing，扩大了原生resize的可触发范围
• 新增::-webkit-resizer伪元素样式，将webkit内核下的resize触发区域拉伸到和滑块同高，覆盖了绝大多数移动端和桌面端浏览器场景
• 把原来右下角的小三角替换为全高的白色拖动条，视觉上明确提示可拖动区域，同时设置pointer-events: none避免这个视觉元素阻挡下层的拖动触发事件
• 添加了ew-resize光标，桌面端hover时会显示左右拖动的光标提示

内容的提问来源于stack exchange，提问作者Saggy