If you’ve used Figma, Blender, or other professional design tools, you’ve probably encountered one of the most satisfying micro-interactions in UI design: clicking on a label and dragging horizontally to scrub through numeric values. It feels immediate, tactile, and infinitely more fluid than clicking into an input, selecting text, and typing a new number.

I recently implemented this pattern for bother, an image processing tool I built, and was surprised at how simple the underlying mechanism is. The secret? The Pointer Lock API.

The Core Concept

The magic happens in about 30 lines of code. Here’s the essence:

1
const DragNumberInputLabel = ({ onSlide, children }) => {
2
  const [isDragging, setIsDragging] = useState(false);
3
  const labelRef = useRef<HTMLLabelElement>(null);
4

5
  return (
6
    <label
7
      ref={labelRef}
8
      onMouseDown={() => {
9
        labelRef.current?.requestPointerLock();
10
        setIsDragging(true);
11
      }}
12
      onMouseMove={(e) => {
13
        if (!isDragging) return;
14
        onSlide?.(e.movementX);
15
      }}
16
      onMouseUp={() => {
17
        setIsDragging(false);
18
        document.exitPointerLock();
19
      }}
20
      className="cursor-ew-resize select-none"
21
    >
22
      {children}
23
    </label>
24
  );
25
};

Why Pointer Lock?

Normally when you click and drag, two things happen that ruin this interaction:

1. The cursor hits the edge of the screen and stops moving, which stops your drag
2. The cursor moves visibly, which feels disconnected from the “scrubbing” metaphor

The Pointer Lock API solves both problems. When you call element.requestPointerLock():

• The cursor becomes invisible
• The cursor position is “locked” (it doesn’t actually move)
• Mouse movement events still fire, but now they report relative movement via e.movementX and e.movementY

This means you can drag infinitely in any direction without hitting screen boundaries. The cursor stays locked to the element, and you get a smooth delta value to update your number.

Breaking Down the Implementation

1. Requesting Pointer Lock

1
onMouseDown={() => {
2
  labelRef.current?.requestPointerLock();
3
  setIsDragging(true);
4
}}

On mouse down, we request pointer lock on the label element. This is a user-gesture-gated API (like fullscreen or audio autoplay), so it only works in response to direct user interaction.

2. Reading Movement Delta

1
onMouseMove={(e) => {
2
  if (!isDragging) return;
3
  onSlide?.(e.movementX);
4
}}

While dragging, we read e.movementX, which gives us relative movement rather than absolute screen position. The value represents how many pixels the mouse moved since the last event. Positive values mean rightward movement, negative means leftward.

We pass this raw delta to the parent via onSlide, letting the consumer decide how to map movement to value changes.

3. Releasing the Lock

1
onMouseUp={() => {
2
  setIsDragging(false);
3
  document.exitPointerLock();
4
}}

On mouse up, we release the pointer lock and the cursor reappears exactly where you started dragging. This feels natural since you’re “scrubbing” rather than “moving.”

Wiring It Up to an Input

Here’s how you’d use this component with an actual numeric input:

1
function PaddingControl() {
2
  const [padding, setPadding] = useState(16);
3

4
  return (
5
    <div className="flex items-center gap-2">
6
      <DragNumberInputLabel
7
        onSlide={(delta) => {
8
          setPadding(prev => Math.max(0, prev + delta));
9
        }}
10
      >
11
        Padding
12
      </DragNumberInputLabel>
13
      <input
14
        type="number"
15
        value={padding}
16
        onChange={(e) => setPadding(Number(e.target.value))}
17
      />
18
    </div>
19
  );
20
}

The onSlide callback receives raw pixel movement. For a 1:1 feel, use it directly. For finer control (like in Figma), you might multiply by a sensitivity factor or respond to modifier keys:

1
onSlide={(delta) => {
2
  const sensitivity = e.shiftKey ? 0.1 : 1;
3
  setPadding(prev => Math.max(0, prev + delta * sensitivity));
4
}}

Visual Feedback

A key part of making this feel polished is visual feedback. In the demo above, I:

1. Set cursor: ew-resize to hint at the interaction
2. Add user-select: none to prevent text selection during drag
3. Change the label style while dragging (bolder text, different background)

1
className={cn(
2
  "cursor-ew-resize select-none",
3
  isDragging && "font-semibold"
4
)}

Browser Support

The Pointer Lock API has excellent browser support across all modern browsers. It’s the same API games use for first-person camera controls, so it’s battle-tested.

One caveat: the API can fail if called too rapidly or if the page doesn’t have focus. In production, you might want to wrap requestPointerLock() in a try-catch or check document.pointerLockElement to handle edge cases.

The Full Component

Here’s the complete implementation I use in bother:

1
import * as React from "react";
2
import { Label } from "./ui/label";
3
import * as LabelPrimitive from "@radix-ui/react-label";
4
import { cn } from "@/lib/utils";
5

6
interface IDragNumberInputProps
7
  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
8
  onSlide?: (value: number) => void;
9
}
10

11
const DragNumberInputLabel: React.FC<IDragNumberInputProps> = ({
12
  children,
13
  className,
14
  onSlide,
15
  ...props
16
}) => {
17
  const [isDragging, setIsDragging] = React.useState(false);
18
  const labelRef = React.useRef<HTMLLabelElement | null>(null);
19

20
  return (
21
    <Label
22
      ref={labelRef}
23
      onMouseDown={() => {
24
        labelRef.current?.requestPointerLock();
25
        setIsDragging(true);
26
      }}
27
      onMouseMove={(e) => {
28
        if (!isDragging) return;
29
        onSlide?.(e.movementX);
30
      }}
31
      onMouseUp={() => {
32
        setIsDragging(false);
33
        document.exitPointerLock();
34
      }}
35
      className={cn(
36
        "cursor-ew-resize select-none",
37
        isDragging && "font-semibold",
38
        className
39
      )}
40
      {...props}
41
    >
42
      {children}
43
    </Label>
44
  );
45
};
46

47
export default DragNumberInputLabel;

Conclusion

The Pointer Lock API turns a surprisingly complex UX pattern into a trivial implementation. It’s one of those web platform features that feels purpose-built for creative tools, and using it correctly makes your UI feel native to the design-tool paradigm users expect.

The interaction is small, but the impact on usability is outsized. When adjusting dimensions in bother, I find myself using the drag inputs almost exclusively over typing values. That’s the sign of a good micro-interaction.