fix(html): slider pointer interaction and edge thumb alignment broken

[sampotts]

Bug Description

Two issues with sliders in the HTML package:

1. Click and drag does not work

Mouse/pointer interaction on sliders is completely non-functional. Focusing the thumb and using keyboard arrows works fine, but clicking and dragging does not.

Root cause: The rootProps returned by createSlider() (onPointerDown, onPointerMove, onPointerLeave) are never bound to the slider element's DOM. Only thumbProps are applied — via context to SliderThumbElement using applyElementProps().

Affected elements:

• SliderElement (packages/html/src/ui/slider/slider-element.ts)
• TimeSliderElement (packages/html/src/ui/time-slider/time-slider-element.ts)
• VolumeSliderElement (packages/html/src/ui/volume-slider/volume-slider-element.ts)

2. thumb-alignment="edge" has no effect

The thumb-alignment="edge" attribute doesn't constrain the thumb within track bounds like it does in the React package.

Root cause: The HTML slider elements compute CSS variables directly from raw state percentages without calling SliderCore.adjustPercentForAlignment(). The React useSlider hook correctly adjusts fillPercent and pointerPercent using DOM measurements before computing CSS vars (use-slider.ts lines 101–115), but the HTML elements skip this entirely.

Suggested Fix

Fix 1: Bind rootProps

In each element's connectedCallback(), after createSlider(), add:

applyElementProps(this, this.#slider.rootProps, signal);

Add applyElementProps to each file's @videojs/core/dom import.

Fix 2: Edge alignment adjustment

In each element's update(), after computing state and before computing CSS vars, adjust percents when thumbAlignment === 'edge':

let cssState = state;
if (state.thumbAlignment === 'edge') {
  const thumb = this.querySelector<HTMLElement>('media-slider-thumb');
  if (thumb) {
    const isHorizontal = state.orientation === 'horizontal';
    const thumbSize = isHorizontal ? thumb.offsetWidth : thumb.offsetHeight;
    const trackSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
    cssState = {
      ...state,
      fillPercent: this.#core.adjustPercentForAlignment(state.fillPercent, thumbSize, trackSize),
      pointerPercent: this.#core.adjustPercentForAlignment(state.pointerPercent, thumbSize, trackSize),
    };
  }
}
const cssVars = getSliderCSSVars(cssState); // or getTimeSliderCSSVars for time slider

No ResizeObserver needed — measurements are read fresh in update() on every interaction change, matching the React approach.

Reference

• React implementation that works correctly: packages/react/src/ui/hooks/use-slider.ts
• Existing pattern for binding props: PopoverElement.connectedCallback() uses applyElementProps(this, this.#popover.popupProps, signal)
• SliderCore.adjustPercentForAlignment() already exists at packages/core/src/core/ui/slider/slider-core.ts:148

[github-actions]

Planning

This is a functional regression in the HTML slider system — click/drag is completely broken for all three slider elements (SliderElement, TimeSliderElement, VolumeSliderElement), and thumb-alignment=\"edge\" silently has no effect.

Epic linkage: Recommend adding to #489 Epic: UC-1 — Core Playback UI Completion, whose acceptance criteria explicitly requires the slider system to be functional. This bug blocks that criteria.

Milestone: Beta (matching Epic #489).

Related issues to plan alongside:

• UI: Slider Preview Component #658 (UI: Slider Preview Component) — pointer position is fundamental to preview overlay positioning; the broken onPointerMove/onPointerLeave root props directly affect that feature.
• docs: add TimeSlider API reference #682 / docs: add VolumeSlider API reference #683 (TimeSlider / VolumeSlider API reference docs) — documenting thumb-alignment is low-value until the attribute actually works.

Blocked by: No explicit blockers, but #688 (tsdown side-effect import stripping) should be confirmed resolved first if applyElementProps relies on side-effect registration in any affected element.

Both fixes are well-scoped and self-contained (no ResizeObserver, no new abstractions). The root causes and corrective patterns are clearly documented in the issue with existing reference points (PopoverElement, use-slider.ts, SliderCore.adjustPercentForAlignment).

[github-actions]

PR #699 landed the SliderCore prerequisites referenced in this issue — adjustPercentForAlignment(), getStepPercent(), and getLargeStepPercent() are now available. Both Bug 1 (rootProps binding) and Bug 2 (edge thumb alignment) remain unresolved in the HTML elements and are ready to implement.