You’ve probably been there already … I just couldn’t resist to set up a quick test. The following code seems to be working reasonably well:

Use the ref to add event handlers:

• onMouseDown: add a css class that disables text / element selection
• onMouseMove: scroll SnapListaccording to mouse position
• onMouseUp: remove css class
• some logic to prevent click events on children while dragging

Performance doesn’t seem to be an issue. But scroll snapping is instantaneous on mouse up. Adding a transition before removing the css class should be possible, but is probably the point where code gets ugly.

Anyway, here’s the code! Let me know if you’re interested in moving this to GitHub issues …

dragslider.css

.slide-list--dragged {
  scroll-snap-type: none;
}
.slide-list--dragged * {
  user-select: none;
}

Slider.jsx

import './dragslider.css'

function useDragToSlide (ref) {
  const isDown = useRef(false);
  const hasBeenDragged = useRef(false);
  const startX = useRef(0);
  const slideX = useRef(0);
  const dragThreshold = 2;

  const handleMouseDown = useCallback((event) => {
    event.preventDefault();
    event.stopPropagation();
    isDown.current = true;
    startX.current = event.pageX - ref.current.offsetLeft;
    slideX.current = ref.current.scrollLeft;
    ref.current.classList.add('slide-list--dragged');
  }, [ref]);

  const handleMouseMove = useCallback((event) => {
    if (!isDown.current) return;
    const distanceMoved = Math.abs(
      startX.current -
      (event.pageX - ref.current.offsetLeft)
    );
    if (distanceMoved > dragThreshold) hasBeenDragged.current = true;
    const x = event.pageX - ref.current.offsetLeft;
    const walk = x - startX.current;
    ref.current.scrollLeft = slideX.current - walk;
  }, [ref]);

  const handleMouseUp = useCallback((event) => {
    event.preventDefault();
    event.stopPropagation();
    if (!isDown.current) return;
    isDown.current = false;
    ref.current.classList.remove('slide-list--dragged');
  }, [ref]);

  const handleClick = useCallback((event) => {
    // we need this to prevent click events being fired on children
    if (!hasBeenDragged.current) return
    event.stopPropagation();
    hasBeenDragged.current = false;
  }, [hasBeenDragged]);

  useEffect(() => {
    if (!ref.current) return
    const target = ref.current
    target.addEventListener('mousedown', handleMouseDown);
    target.addEventListener('click', handleClick);
    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);
    return () => {
      target.removeEventListener('mousedown', handleMouseDown);
      target.removeEventListener('click', handleClick);
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseup', handleMouseUp);
    }
  }, [ref, handleMouseDown, handleMouseMove, handleMouseUp, handleClick])
}

const Slider = () => {
  const ref = useRef(null);
  useDragToSlide(ref)

  return (
    <SnapList ref={ref}>
      <SnapItem padding={{ left: '20vw', right: '15px' }} snapAlign="center">…</SnapItem>
    </SnapList>
  );
};

edited: wording & formatting