demo · v136

Slider thumb drag

The actual bug class the PEWG fix targets: a slider thumb captures the pointer on press, the user drags off the track, releases — pre-136 the eventual click never landed on the thumb (it went to body) so synthesised click handlers (analytics, focus rings, screen-reader announcements) all missed.

Press the thumb, drag anywhere on the page, release. Watch where the click lands.
0255075100
value
25
last click target
—
click on thumb count
0
click escaped count
0

event log

the code

thumb.addEventListener("pointerdown", e => { thumb.setPointerCapture(e.pointerId); });
thumb.addEventListener("pointermove", e => {
  if (!thumb.hasPointerCapture(e.pointerId)) return;
  setValue(xToValue(e.clientX));
});
thumb.addEventListener("click", () => {
  // Pre-136: only fires when pointerup happens over the thumb's rectangle.
  // 136+:    fires on thumb regardless of pointerup target.
  announce("volume changed");
});

why this angle

The sibling concept is the canonical A-and-B boxes — great for explaining the rule. This concept is the real-world UI it was designed to fix: the slider thumb. Range inputs ship with this fix baked into the UA, but every custom slider rolled their own and hit this bug. Drag the thumb out of the track and release on the page — the "click escaped" counter goes up in pre-136 browsers, stays at zero in 136+.

see also