Before / After

<div class="nuda-baslider">
  <div class="nuda-baslider__after"></div>
  <div class="nuda-baslider__before" style="width:55%"></div>
  <div class="nuda-baslider__handle" style="left:55%"><span></span></div>
  <span class="nuda-baslider__label nuda-baslider__label--b">Before</span>
  <span class="nuda-baslider__label nuda-baslider__label--a">After</span>
</div>

const root  = document.querySelector('.nuda-baslider');
const before = root.querySelector('.nuda-baslider__before');
const handle = root.querySelector('.nuda-baslider__handle');
let dragging = false;

const setPercent = (clientX) => {
  const rect = root.getBoundingClientRect();
  const pct  = Math.min(100, Math.max(0, ((clientX - rect.left) / rect.width) * 100));
  before.style.width = pct + '%';
  handle.style.left  = pct + '%';
};

handle.addEventListener('pointerdown', () => (dragging = true));
window.addEventListener('pointerup', () => (dragging = false));
window.addEventListener('pointermove', (e) => dragging && setPercent(e.clientX));

.nuda-baslider {
  position: relative;
  width: 100%;
  max-width: 240px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  user-select: none;
}

.nuda-baslider__after {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,#62b6ff,#9d6dff);
}

.nuda-baslider__before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(135deg,#1a1a20,#0c0c10);
  overflow: hidden;
}

.nuda-baslider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fafafa;
  cursor: ew-resize;
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(255,255,255,.4);
}

.nuda-baslider__handle span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fafafa;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-baslider__handle span::before,.nuda-baslider__handle span::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.nuda-baslider__handle span::before {
  border-right: 5px solid #09090b;
  margin-right: 2px;
}

.nuda-baslider__handle span::after {
  border-left: 5px solid #09090b;
  margin-left: 2px;
}

.nuda-baslider__label {
  position: absolute;
  top: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fafafa;
  padding: 3px 7px;
  background: rgba(0,0,0,.5);
  border-radius: 99px;
}

.nuda-baslider__label--b {
  left: 8px;
}

.nuda-baslider__label--a {
  right: 8px;
}