Before/after slider

import { useState } from 'react';
import { Slider } from '@base-ui/react/slider';

const LABEL =
  'absolute top-3 rounded-full bg-black/60 px-2.5 py-1 text-xs font-medium text-white';

export function BeforeAfterSlider() {
  const [position, setPosition] = useState(50);

  return (
    <div className='relative aspect-video w-full max-w-2xl overflow-hidden rounded-2xl select-none'>
      <img
        src='/kitchen-after.jpg'
        alt='Kitchen after the renovation'
        className='absolute inset-0 size-full object-cover'
      />
      {/* Clip the top image instead of resizing it, so the two stay perfectly aligned. */}
      <img
        src='/kitchen-before.jpg'
        alt='Kitchen before the renovation'
        className='absolute inset-0 size-full object-cover'
        style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}
      />
      <span className={`${LABEL} left-3`}>Before</span>
      <span className={`${LABEL} right-3`}>After</span>
      {/* Base UI handles dragging anywhere on the image, touch, and the arrow keys. */}
      <Slider.Root
        value={position}
        onValueChange={setPosition}
        className='absolute inset-0'
      >
        <Slider.Control className='size-full cursor-ew-resize touch-none'>
          <Slider.Track className='size-full'>
            <Slider.Thumb
              aria-label='Comparison position'
              className='h-full w-0.5 bg-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-white'
            >
              <span className='absolute top-1/2 left-1/2 grid size-11 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-white text-black shadow-lg'>
                ↔
              </span>
            </Slider.Thumb>
          </Slider.Track>
        </Slider.Control>
      </Slider.Root>
    </div>
  );
}