Dual Slider

Tailwind CSS, framer-motion

Resources

Calls: 0 per minute

Payload size: 2206 kb

Grab the handle and scroll sideways

The slider made of a couple of motion.div components whose width depends on the x-axis position of the pointer during the drag gesture (event.clientX).
Notably for a the drag gesture to properly follow the mouse around the callback has to be attached on the window object via an event listener, not just on the component itself via jsx (onMouseMove) as doing so will only follow the pointer while it is within the component.