@adia-ai/web-components 0.6.36 → 0.6.37

package/components/slider/slider.class.js

@@ -14,10 +14,14 @@
 /**
  * <slider-ui label="Width" value="63" min="0" max="200" step="1" suffix="rem"></slider-ui>
  *
- * Layout:
+ * Single-thumb layout:
  *   [label]                                  [value] [suffix]
  *   [=====fill=====●─────────────────track───────────────────]
  *
+ * Dual-thumb layout (set [dual] + [lower-value] / [upper-value]):
+ *   [label]                              [lower–upper] [suffix]
+ *   [───────●═════════════════●──────────────────────────────]
+ *
  * The `label` attribute renders as a first-class in-component caption in
  * the slider header and is mirrored to `aria-label` on the host for
  * screen-reader announcement. Wrap in `<field-ui>` only when you need
@@ -35,24 +39,20 @@ export class UISlider extends UIFormElement {
 
   static properties = {
     ...UIFormElement.properties,
-    /** value: Number — overrides UIFormElement.value (String); syncs as string on form submit. */
-    value:  { type: Number,  default: 50, reflect: true },
+    /** value: Number — single-thumb mode; ignored when [dual]. */
+    value:       { type: Number,  default: 50,  reflect: true },
+    /** dual: when true, two-thumb mode; lowerValue / upperValue authoritative. */
+    dual:        { type: Boolean, default: false, reflect: true },
+    /** lowerValue: dual mode; clamped to ≤ upperValue. */
+    lowerValue:  { type: Number,  default: 0,   reflect: true, attribute: 'lower-value' },
+    /** upperValue: dual mode; clamped to ≥ lowerValue. */
+    upperValue:  { type: Number,  default: 100, reflect: true, attribute: 'upper-value' },
     min:    { type: Number,  default: 0,  reflect: true },
     max:    { type: Number,  default: 100, reflect: true },
     step:   { type: Number,  default: 1,  reflect: true },
     label:  { type: String,  default: '', reflect: true },
     suffix: { type: String,  default: '', reflect: true },
-    // §184 (v0.5.5, FEEDBACK-08 §4) → §220 (v0.5.9, FEEDBACK-14 §3):
-    // declarative trailing-debounce on `input` for expensive consumers
-    // (palette regen, shader compile, large list reflow). When > 0,
-    // value updates + visual feedback are immediate but `input` is
-    // collapsed across the window. `change` fires unthrottled on
-    // pointerup / track click / keyboard; any pending `input` flushes
-    // BEFORE `change` so consumers always see
-    // input→input→…→input→change ordering. throttle="0" (default)
-    // preserves the pre-§184 every-pointer-move-fires-input behavior.
-    // The mechanism graduated to UIFormElement at v0.5.9 §220 — slider
-    // delegates via scheduleThrottledInput() + flushPendingInput().
+    // §184/§220 throttle inherited from UIFormElement.
   };
 
   static template = () => null;
@@ -62,12 +62,19 @@ export class UISlider extends UIFormElement {
 
   #trackEl = null;
   #thumbEl = null;
+  #thumbLowerEl = null;
+  #thumbUpperEl = null;
   #dragging = false;
+  #draggingThumb = null; // 'lower' | 'upper' | null (dual only)
   #dragOffset = 0;
+  // Previous-render values used by the dual-mode constraint to decide
+  // which thumb to clamp when lower > upper. NaN sentinel = first render.
+  #prevLowerValue = NaN;
+  #prevUpperValue = NaN;
 
-  get #pct() {
+  #pctOf(v) {
     const range = this.max - this.min;
-    return range > 0 ? ((this.value - this.min) / range) * 100 : 0;
+    return range > 0 ? (v - this.min) / range : 0;
   }
 
   #format(v) {
@@ -77,27 +84,42 @@ export class UISlider extends UIFormElement {
 
   connected() {
     super.connected();
-    this.setAttribute('role', 'slider');
+    const isDual = this.dual;
+    this.setAttribute('role', isDual ? 'group' : 'slider');
     this.setAttribute('tabindex', '0');
-    this.setAttribute('aria-valuemin', this.min);
-    this.setAttribute('aria-valuemax', this.max);
+    if (!isDual) {
+      this.setAttribute('aria-valuemin', this.min);
+      this.setAttribute('aria-valuemax', this.max);
+    } else {
+      // Group host should not carry valuemin/max — the per-thumb sliders do.
+      this.removeAttribute('aria-valuemin');
+      this.removeAttribute('aria-valuemax');
+    }
     if (this.label) this.setAttribute('aria-label', this.label);
 
     if (!this.querySelector('[slot="track"]')) {
       // §184 (v0.5.5, FEEDBACK-08 §7): hint slot stamped underneath
       // the track when [hint] is set. Wired to aria-describedby below.
       const hintId = this.hint ? `slider-hint-${++UISlider.#hintSeq}` : '';
+      const lowerLabel = this.label ? `${this.label} lower bound` : 'Lower bound';
+      const upperLabel = this.label ? `${this.label} upper bound` : 'Upper bound';
+      const readout = isDual
+        ? `<span slot="value-lower">${this.#format(this.lowerValue)}</span><span slot="value-sep" aria-hidden="true">–</span><span slot="value-upper">${this.#format(this.upperValue)}</span>`
+        : `<span slot="value">${this.#format(this.value)}</span>`;
+      const thumbs = isDual
+        ? `<div slot="thumb" data-thumb="lower" tabindex="0" role="slider" aria-label="${lowerLabel}" aria-valuemin="${this.min}" aria-valuemax="${this.max}"></div><div slot="thumb" data-thumb="upper" tabindex="0" role="slider" aria-label="${upperLabel}" aria-valuemin="${this.min}" aria-valuemax="${this.max}"></div>`
+        : `<div slot="thumb" tabindex="0"></div>`;
       this.innerHTML = `
         <div slot="header">
           ${this.label ? `<span slot="label">${this.label}</span>` : ''}
           <span slot="readout">
-            <span slot="value">${this.#format(this.value)}</span>
+            ${readout}
             ${this.suffix ? `<span slot="suffix">${this.suffix}</span>` : ''}
           </span>
         </div>
         <div slot="track">
           <div slot="fill"></div>
-          <div slot="thumb" tabindex="0"></div>
+          ${thumbs}
         </div>
         ${this.hint ? `<span slot="hint" id="${hintId}">${this.hint}</span>` : ''}
       `;
@@ -105,32 +127,28 @@ export class UISlider extends UIFormElement {
     }
 
     this.#trackEl = this.querySelector('[slot="track"]');
-    this.#thumbEl = this.querySelector('[slot="thumb"]');
+    if (isDual) {
+      this.#thumbLowerEl = this.querySelector('[slot="thumb"][data-thumb="lower"]');
+      this.#thumbUpperEl = this.querySelector('[slot="thumb"][data-thumb="upper"]');
+      this.#thumbLowerEl?.addEventListener('pointerdown', this.#onPointerDown);
+      this.#thumbUpperEl?.addEventListener('pointerdown', this.#onPointerDown);
+    } else {
+      this.#thumbEl = this.querySelector('[slot="thumb"]');
+      this.#thumbEl?.addEventListener('pointerdown', this.#onPointerDown);
+    }
 
-    if (this.#thumbEl) this.#thumbEl.addEventListener('pointerdown', this.#onPointerDown);
-    if (this.#trackEl) this.#trackEl.addEventListener('click', this.#onTrackClick);
+    this.#trackEl?.addEventListener('click', this.#onTrackClick);
     this.addEventListener('keydown', this.#onKey);
   }
 
   render() {
     if (!this.#trackEl) return;
 
-    // §153 (v0.5.3): function-typed `.value` runtime guard. Per FEEDBACK-07
-    // §3, consumers sometimes pass `() => signal.value * 100` expecting
-    // auto-subscribe; AdiaUI's reactive system (template.js `isFn` branch)
-    // does wrap functions in effects + call them per dep change, but the
-    // result of `v()` must be a number for `#pct` / `#format` to work.
-    // When the function returns non-number (e.g. doesn't read a signal,
-    // returns object/string) OR when consumers bypass the template engine
-    // (manual `sliderEl.value = someFunction`), `this.value` ends up as
-    // the function itself — `#pct` does NaN math, thumb stays at 0%,
-    // silent fail. Warn loudly + skip render so the bug class is
-    // diagnosable in dev. See USAGE.md "Reactive binding" for the
-    // documented patterns.
-    if (typeof this.value === 'function') {
+    // §153 function-typed value guard (extended to dual props).
+    if (typeof this.value === 'function' || typeof this.lowerValue === 'function' || typeof this.upperValue === 'function') {
       // eslint-disable-next-line no-console
       console.warn(
-        '[slider-ui] .value received a function. Did you mean:\n' +
+        '[slider-ui] .value / .lowerValue / .upperValue received a function. Did you mean:\n' +
         '  .value=${fn()}            ← call the function to get the current value\n' +
         '  .value=${signal.value}     ← read the signal\'s current value\n' +
         'Functions are not auto-invoked at render time; the slider reads\n' +
@@ -140,18 +158,56 @@ export class UISlider extends UIFormElement {
       return;
     }
 
-    const pct = this.#pct;
-    // Write progress to CSS custom property for pure-CSS positioning.
-    // --slider-pct is a fraction (0.0–1.0) used in calc() alongside
-    // --slider-travel so thumb + fill stay inside the track.
-    this.style.setProperty('--slider-pct', String(pct / 100));
+    if (this.dual) {
+      // Bidirectional constraint: lower ≤ upper, but clamp the prop that
+      // was just changed (so direct programmatic prop assignment behaves
+      // intuitively in both directions).
+      //   - lower bumped up past upper  → clamp lower DOWN to upper
+      //   - upper bumped down past lower → clamp upper UP to lower
+      //   - both/neither (first render) → fall back to clamp lower DOWN
+      if (this.lowerValue > this.upperValue) {
+        const lowerChanged = !Number.isNaN(this.#prevLowerValue) && this.lowerValue !== this.#prevLowerValue;
+        const upperChanged = !Number.isNaN(this.#prevUpperValue) && this.upperValue !== this.#prevUpperValue;
+        if (upperChanged && !lowerChanged) {
+          this.upperValue = this.lowerValue;
+        } else {
+          this.lowerValue = this.upperValue;
+        }
+      }
+      this.#prevLowerValue = this.lowerValue;
+      this.#prevUpperValue = this.upperValue;
+      const pctL = this.#pctOf(this.lowerValue);
+      const pctU = this.#pctOf(this.upperValue);
+      this.style.setProperty('--slider-pct-lower', String(pctL));
+      this.style.setProperty('--slider-pct-upper', String(pctU));
 
-    const valueEl = this.querySelector('[slot="value"]');
-    if (valueEl) valueEl.textContent = this.#format(this.value);
+      const valueLEl = this.querySelector('[slot="value-lower"]');
+      const valueUEl = this.querySelector('[slot="value-upper"]');
+      if (valueLEl) valueLEl.textContent = this.#format(this.lowerValue);
+      if (valueUEl) valueUEl.textContent = this.#format(this.upperValue);
+
+      if (this.#thumbLowerEl) {
+        this.#thumbLowerEl.setAttribute('aria-valuenow', this.lowerValue);
+        this.#thumbLowerEl.setAttribute('aria-valuetext', `${this.#format(this.lowerValue)}${this.suffix ? ' ' + this.suffix : ''}`);
+      }
+      if (this.#thumbUpperEl) {
+        this.#thumbUpperEl.setAttribute('aria-valuenow', this.upperValue);
+        this.#thumbUpperEl.setAttribute('aria-valuetext', `${this.#format(this.upperValue)}${this.suffix ? ' ' + this.suffix : ''}`);
+      }
+      this.syncValue(`${this.lowerValue},${this.upperValue}`);
+    } else {
+      const pct = this.#pctOf(this.value);
+      this.style.setProperty('--slider-pct', String(pct));
+
+      const valueEl = this.querySelector('[slot="value"]');
+      if (valueEl) valueEl.textContent = this.#format(this.value);
+
+      this.setAttribute('aria-valuenow', this.value);
+      this.setAttribute('aria-valuetext', `${this.#format(this.value)}${this.suffix ? ' ' + this.suffix : ''}`);
+      this.syncValue(String(this.value));
+    }
 
-    // §FB-45: label and suffix are read in connected() but may be set later
-    // by the template engine (which first writes {{p:N}} then resolves).
-    // Re-sync both slots on every render so reactive bindings work.
+    // §FB-45: label + suffix late-binding re-sync (shared across modes).
     const labelEl = this.querySelector('[slot="label"]');
     if (labelEl) {
       labelEl.textContent = this.label;
@@ -163,44 +219,68 @@ export class UISlider extends UIFormElement {
 
     const suffixEl = this.querySelector('[slot="suffix"]');
     if (suffixEl) suffixEl.textContent = this.suffix;
-
-    this.setAttribute('aria-valuenow', this.value);
-    this.setAttribute('aria-valuetext', `${this.#format(this.value)}${this.suffix ? ' ' + this.suffix : ''}`);
-    this.syncValue(String(this.value));
   }
 
   /**
    * Inverse geometry: given a *desired* thumb-center viewport-x, compute
-   * the slider value such that the thumb center lands exactly at that
-   * coordinate (clamped at the min/max extremes).
+   * the slider value such that the named thumb's visual center lands at
+   * that coordinate (clamped to min/max).
    *
-   * Forward geometry (in slider.css):
-   *   thumb_center(p) = t/2 + p · (W − t)
+   * Forward geometry differs by mode (see slider.css):
+   *   single                      → center = t/2  + p · (W − t)
+   *   dual lower (data-thumb=lower) → center = t/2  + p · (W − 2t)
+   *   dual upper (data-thumb=upper) → center = 1.5t + p · (W − 2t)
    *
-   * Inverse (solve for p, clamped):
-   *   p = clamp01((target − t/2) / (W − t))
+   * The dual model reserves 2t of travel-space so the two thumbs can
+   * never overlap — they touch edge-to-edge at equal values and span the
+   * full track at opposite extremes.
    *
-   * Two call paths share this:
-   *   • #onTrackClick — clientX is the click position; thumb center lands
-   *     under the cursor (or snaps to the t/2 end-zone when clicked beyond).
-   *   • #onPointerMove — (clientX − dragOffset) is the *intended* thumb
-   *     center (offset preserves where the user originally grabbed the
-   *     thumb, so dragging feels relative rather than snap-to-cursor).
+   * @param {number} clientX  viewport x of the desired thumb center
+   * @param {'lower'|'upper'|null} which  which thumb's geometry to invert
+   *   (null = single-thumb mode); ignored when this.dual is false
    */
-  #valueFromX(clientX) {
-    if (!this.#trackEl || !this.#thumbEl) return this.min;
+  #valueFromX(clientX, which = null) {
+    const refThumb = this.#thumbEl || this.#thumbLowerEl || this.#thumbUpperEl;
+    if (!this.#trackEl || !refThumb) return this.min;
     const trackRect = this.#trackEl.getBoundingClientRect();
-    const thumbRect = this.#thumbEl.getBoundingClientRect();
+    const t = refThumb.getBoundingClientRect().width;
     const W = trackRect.width;
-    const t = thumbRect.width;
-    const travel = W - t;
+    let travel, offset;
+    if (this.dual) {
+      travel = W - 2 * t;
+      offset = which === 'upper' ? 1.5 * t : 0.5 * t;
+    } else {
+      travel = W - t;
+      offset = 0.5 * t;
+    }
     if (travel <= 0) return this.min;
-    const target = clientX - trackRect.left;            // desired thumb-center, track-relative
-    const ratio = Math.max(0, Math.min(1, (target - t / 2) / travel));
+    const target = clientX - trackRect.left;
+    const ratio = Math.max(0, Math.min(1, (target - offset) / travel));
     const raw = this.min + ratio * (this.max - this.min);
     return this.#snap(raw);
   }
 
+  // Visual-center of the named thumb in viewport coords. Used by drag
+  // logic to capture the cursor offset relative to the thumb's logical
+  // (transition-immune) center. Mirrors the forward geometry in
+  // slider.css per-mode.
+  #centerOfThumb(which) {
+    if (!this.#trackEl) return 0;
+    const refThumb = this.#thumbEl || this.#thumbLowerEl || this.#thumbUpperEl;
+    if (!refThumb) return 0;
+    const trackRect = this.#trackEl.getBoundingClientRect();
+    const t = refThumb.getBoundingClientRect().width;
+    const W = trackRect.width;
+    if (this.dual) {
+      const travel = W - 2 * t;
+      const p = which === 'upper' ? this.#pctOf(this.upperValue) : this.#pctOf(this.lowerValue);
+      const offset = which === 'upper' ? 1.5 * t : 0.5 * t;
+      return trackRect.left + offset + p * travel;
+    } else {
+      return trackRect.left + 0.5 * t + this.#pctOf(this.value) * (W - t);
+    }
+  }
+
   #snap(raw) {
     const stepped = Math.round((raw - this.min) / this.step) * this.step + this.min;
     return Math.max(this.min, Math.min(this.max, parseFloat(stepped.toFixed(10))));
@@ -209,98 +289,160 @@ export class UISlider extends UIFormElement {
   #setValue(v) {
     if (v === this.value) return;
     this.value = v;
-    // §220 (v0.5.9): delegate to UIFormElement's shared throttle helper.
-    // When `this.throttle > 0`, the dispatch is trailing-debounced
-    // (collapses pointer-move bursts to one emission). When 0, fires
-    // synchronously.
     this.scheduleThrottledInput();
   }
 
+  #setLowerValue(v) {
+    const clamped = Math.min(Math.max(v, this.min), this.upperValue);
+    if (clamped === this.lowerValue) return;
+    this.lowerValue = clamped;
+    this.scheduleThrottledInput();
+  }
+
+  #setUpperValue(v) {
+    const clamped = Math.max(Math.min(v, this.max), this.lowerValue);
+    if (clamped === this.upperValue) return;
+    this.upperValue = clamped;
+    this.scheduleThrottledInput();
+  }
+
+  #emitChange() {
+    const detail = this.dual
+      ? { lower: this.lowerValue, upper: this.upperValue }
+      : { value: this.value };
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail }));
+  }
+
   #onPointerDown = (e) => {
     if (this.disabled) return;
     e.preventDefault();
     this.#dragging = true;
     this.setAttribute('data-dragging', '');
-    // Capture the offset between the click point and the thumb's
-    // *logical* center (derived from `this.value` via the same forward
-    // equation the CSS uses). We deliberately do NOT read the thumb's
-    // bounding rect here — the CSS `left` transition can leave the
-    // physical rect mid-animation between values, producing a stale
-    // offset that would translate into a snap on the first move.
-    // Logical center is transition-immune and matches what #valueFromX
-    // inverts.
-    if (this.#trackEl && this.#thumbEl) {
-      const trackRect = this.#trackEl.getBoundingClientRect();
-      const thumbRect = this.#thumbEl.getBoundingClientRect();
-      const W = trackRect.width;
-      const t = thumbRect.width;
-      const travel = W - t;
-      const range = this.max - this.min;
-      const p = range > 0 ? (this.value - this.min) / range : 0;
-      const logicalCenter = trackRect.left + t / 2 + p * travel;
-      this.#dragOffset = e.clientX - logicalCenter;
+
+    let thumb;
+    if (this.dual) {
+      const which = e.currentTarget?.dataset?.thumb;
+      this.#draggingThumb = which === 'upper' ? 'upper' : 'lower';
+      thumb = this.#draggingThumb === 'lower' ? this.#thumbLowerEl : this.#thumbUpperEl;
+      // Lift the dragged thumb above its sibling so it stays visually
+      // anchored even when both thumbs land at the same value.
+      thumb?.setAttribute('data-active', '');
+    } else {
+      thumb = this.#thumbEl;
+    }
+
+    if (this.#trackEl && thumb) {
+      // Logical center derived from the forward geometry (transition-immune),
+      // not from getBoundingClientRect which can be mid-animation.
+      const which = this.dual ? this.#draggingThumb : null;
+      this.#dragOffset = e.clientX - this.#centerOfThumb(which);
     } else {
       this.#dragOffset = 0;
     }
-    this.#thumbEl.setPointerCapture(e.pointerId);
-    this.#thumbEl.addEventListener('pointermove', this.#onPointerMove);
-    this.#thumbEl.addEventListener('pointerup', this.#onPointerUp);
+
+    thumb.setPointerCapture(e.pointerId);
+    thumb.addEventListener('pointermove', this.#onPointerMove);
+    thumb.addEventListener('pointerup', this.#onPointerUp);
   };
 
   #onPointerMove = (e) => {
     if (!this.#dragging) return;
-    // Subtract the captured offset so the thumb center tracks the
-    // cursor relative to where the user originally pressed, avoiding
-    // the initial snap.
-    this.#setValue(this.#valueFromX(e.clientX - this.#dragOffset));
+    const adjustedX = e.clientX - this.#dragOffset;
+    if (this.dual) {
+      const v = this.#valueFromX(adjustedX, this.#draggingThumb);
+      if (this.#draggingThumb === 'lower') this.#setLowerValue(v);
+      else this.#setUpperValue(v);
+    } else {
+      this.#setValue(this.#valueFromX(adjustedX));
+    }
   };
 
   #onPointerUp = (e) => {
     this.#dragging = false;
     this.#dragOffset = 0;
     this.removeAttribute('data-dragging');
-    this.#thumbEl.releasePointerCapture(e.pointerId);
-    this.#thumbEl.removeEventListener('pointermove', this.#onPointerMove);
-    this.#thumbEl.removeEventListener('pointerup', this.#onPointerUp);
+    const thumb = this.dual
+      ? (this.#draggingThumb === 'lower' ? this.#thumbLowerEl : this.#thumbUpperEl)
+      : this.#thumbEl;
+    thumb?.releasePointerCapture(e.pointerId);
+    thumb?.removeEventListener('pointermove', this.#onPointerMove);
+    thumb?.removeEventListener('pointerup', this.#onPointerUp);
+    // Drop the active marker — but only after emitting change, so any
+    // mid-drag z-index lift stays painted through the up event.
+    thumb?.removeAttribute('data-active');
     this.flushPendingInput(); // §220 (was §184 #flushInput): pending throttled input fires before change
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+    this.#emitChange();
+    this.#draggingThumb = null;
   };
 
   #onTrackClick = (e) => {
-    if (this.disabled || e.target === this.#thumbEl) return;
-    this.#setValue(this.#valueFromX(e.clientX));
-    this.flushPendingInput(); // §220 (was §184 #flushInput): ensure trailing input precedes change
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+    if (this.disabled) return;
+    if (this.dual) {
+      if (e.target === this.#thumbLowerEl || e.target === this.#thumbUpperEl) return;
+      // Pick the thumb closer to the click in pixel space (using each
+      // thumb's own forward-geometry center), then re-invert with that
+      // thumb's geometry so the chosen thumb lands precisely under the
+      // cursor.
+      const distLower = Math.abs(e.clientX - this.#centerOfThumb('lower'));
+      const distUpper = Math.abs(e.clientX - this.#centerOfThumb('upper'));
+      if (distLower <= distUpper) {
+        this.#setLowerValue(this.#valueFromX(e.clientX, 'lower'));
+      } else {
+        this.#setUpperValue(this.#valueFromX(e.clientX, 'upper'));
+      }
+    } else {
+      if (e.target === this.#thumbEl) return;
+      this.#setValue(this.#valueFromX(e.clientX));
+    }
+    this.flushPendingInput();
+    this.#emitChange();
   };
 
   #onKey = (e) => {
     if (this.disabled) return;
-    let v = this.value;
+    let delta = 0;
+    let absolute = null;
     switch (e.key) {
-      case 'ArrowRight': case 'ArrowUp':   v += this.step; break;
-      case 'ArrowLeft':  case 'ArrowDown': v -= this.step; break;
-      case 'Home': v = this.min; break;
-      case 'End':  v = this.max; break;
-      case 'PageUp':   v += this.step * 10; break;
-      case 'PageDown': v -= this.step * 10; break;
+      case 'ArrowRight': case 'ArrowUp':   delta =  this.step; break;
+      case 'ArrowLeft':  case 'ArrowDown': delta = -this.step; break;
+      case 'Home':       absolute = this.min; break;
+      case 'End':        absolute = this.max; break;
+      case 'PageUp':     delta =  this.step * 10; break;
+      case 'PageDown':   delta = -this.step * 10; break;
       default: return;
     }
     e.preventDefault();
-    this.#setValue(this.#snap(v));
-    this.flushPendingInput(); // §220 (was §184 #flushInput): trailing input fires before change
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+
+    if (this.dual) {
+      // Move whichever thumb is focused. Default to lower when neither.
+      const active = this.ownerDocument?.activeElement;
+      const targetThumb = active === this.#thumbUpperEl ? 'upper' : 'lower';
+      const current = targetThumb === 'lower' ? this.lowerValue : this.upperValue;
+      let next = absolute !== null ? absolute : current + delta;
+      next = this.#snap(next);
+      if (targetThumb === 'lower') this.#setLowerValue(next);
+      else this.#setUpperValue(next);
+    } else {
+      let v = absolute !== null ? absolute : this.value + delta;
+      this.#setValue(this.#snap(v));
+    }
+    this.flushPendingInput();
+    this.#emitChange();
   };
 
   disconnected() {
     super.disconnected();
     this.#thumbEl?.removeEventListener('pointerdown', this.#onPointerDown);
+    this.#thumbLowerEl?.removeEventListener('pointerdown', this.#onPointerDown);
+    this.#thumbUpperEl?.removeEventListener('pointerdown', this.#onPointerDown);
     this.#trackEl?.removeEventListener('click', this.#onTrackClick);
-    this.#thumbEl?.removeEventListener('pointermove', this.#onPointerMove);
-    this.#thumbEl?.removeEventListener('pointerup', this.#onPointerUp);
+    // Pointermove/up listeners are attached transiently per-drag to the
+    // active thumb; #onPointerUp removes them. If disconnect happens
+    // mid-drag the browser tears down listeners with the element anyway.
     this.removeEventListener('keydown', this.#onKey);
-    // §220 (v0.5.9): UIFormElement.disconnected() auto-drops the pending
-    // throttled input dispatch via super.disconnected().
     this.#trackEl = null;
     this.#thumbEl = null;
+    this.#thumbLowerEl = null;
+    this.#thumbUpperEl = null;
   }
 }

package/components/slider/slider.css

@@ -86,13 +86,17 @@
     /* Progress fraction (0.0 → 1.0) written by JS. */
     --slider-pct-default:               0;
 
+    /* Dual-thumb progress fractions (0.0 → 1.0) written by JS when [dual]. */
+    --slider-pct-lower-default:         0;
+    --slider-pct-upper-default:         1;
+
     /* ── Colors ──
        Track: dim recessed surface  |  Fill: primary  |  Thumb: white chrome */
     --slider-track-bg-default:          var(--a-bg-muted);
     --slider-fill-bg-default:           var(--a-primary-bg);
     --slider-thumb-bg-default:          var(--a-chrome-light);
-    --slider-fill-bg-disabled-default:  var(--a-border-subtle);
-    --slider-thumb-bg-disabled-default: var(--a-fg-muted);
+    --slider-fill-bg-disabled-default:  var(--a-canvas-1-scrim);
+    --slider-thumb-bg-disabled-default: var(--a-canvas-2-scrim);
 
     /* ── Typography ── */
     --slider-font-size-default:         var(--a-ui-size);
@@ -172,6 +176,43 @@
                 + var(--slider-pct, var(--slider-pct-default)) * (100% - var(--slider-thumb-width, var(--slider-thumb-width-default))));
   }
 
+  /* Dual-thumb geometry: each thumb has an EFFECTIVE travel of (W − 2t),
+     not (W − t) — the reservation of 2t guarantees the thumbs never
+     overlap. At equal values they touch edge-to-edge; at extremes the
+     gap between thumb visual-edges represents 100% of the value range.
+
+     Forward equations (track-relative pixel positions):
+       lower_visual_left  (p_l) = p_l · (W − 2t)
+       lower_visual_right (p_l) = t + p_l · (W − 2t)
+       upper_visual_left  (p_u) = t + p_u · (W − 2t)
+       upper_visual_right (p_u) = 2t + p_u · (W − 2t)
+
+     CSS thumb `left` (visual center, since transform: translate(-50%)):
+       lower center = t/2  + p_l · (W − 2t)
+       upper center = 1.5t + p_u · (W − 2t)
+
+     Fill (lower-edge → upper-edge):
+       fill_left  = p_l · (W − 2t)
+       fill_width = 2t + (p_u − p_l) · (W − 2t)
+
+     Sanity:
+       p_l = p_u                → fill_width = 2t      (both thumbs touching)
+       p_l = 0,   p_u = 1       → fill_width = W       (full track filled)
+       p_l = 0.5, p_u = 0.5     → pair centered at W/2 (thumbs touch at midpoint)
+       p_l = 0.2, p_u = 0.8, W=716, t=36 →
+         travel = W − 2t = 644
+         fill_left  = 0.2·644 = 128.8
+         fill_width = 72 + 0.6·644 = 458.4
+         fill_right = 587.2                              (= upper visual right) */
+  :scope[dual] [slot="fill"] {
+    left: calc(var(--slider-pct-lower, var(--slider-pct-lower-default))
+               * (100% - 2 * var(--slider-thumb-width, var(--slider-thumb-width-default))));
+    width: calc(2 * var(--slider-thumb-width, var(--slider-thumb-width-default))
+                + (var(--slider-pct-upper, var(--slider-pct-upper-default))
+                   - var(--slider-pct-lower, var(--slider-pct-lower-default)))
+                * (100% - 2 * var(--slider-thumb-width, var(--slider-thumb-width-default))));
+  }
+
   /* Thumb CONTAINER: full track height, geometry width.
      Transparent background; the white pill is rendered by ::before.
      This element provides a generous vertical grab area.     */
@@ -211,6 +252,45 @@
     transition: transform var(--slider-duration, var(--slider-duration-default)) var(--slider-easing, var(--slider-easing-default));
   }
 
+  /* Dual-mode thumb positions: each thumb travels along (W − 2t) so they
+     can never overlap. Lower's CSS center starts at t/2 (visual left
+     edge at 0); upper's CSS center starts at 1.5t (visual left edge at
+     t, leaving room for lower). At equal values the two thumbs touch
+     edge-to-edge — the 2t reservation between them is exactly the
+     combined thumb-width.
+
+     z-index nudges keep both thumbs paintable at boundary positions.
+     The "active" (currently-dragging) thumb lifts above its sibling. */
+  :scope[dual] [slot="thumb"][data-thumb="lower"] {
+    left: calc(var(--slider-thumb-width, var(--slider-thumb-width-default)) / 2
+               + var(--slider-pct-lower, var(--slider-pct-lower-default))
+               * (100% - 2 * var(--slider-thumb-width, var(--slider-thumb-width-default))));
+    z-index: 2;
+  }
+  :scope[dual] [slot="thumb"][data-thumb="upper"] {
+    left: calc(var(--slider-thumb-width, var(--slider-thumb-width-default)) * 1.5
+               + var(--slider-pct-upper, var(--slider-pct-upper-default))
+               * (100% - 2 * var(--slider-thumb-width, var(--slider-thumb-width-default))));
+    z-index: 3;
+  }
+  /* When the user is dragging a thumb, lift it above its sibling so the
+     dragged one stays visually anchored even if they cross. */
+  :scope[dual] [slot="thumb"][data-active] {
+    z-index: 4;
+  }
+
+  /* Dual-mode readout: separator + numeric pair */
+  :scope[dual] [slot="value-sep"] {
+    color: var(--a-fg-muted);
+    padding: 0 var(--a-space-0-5);
+  }
+  :scope[dual] [slot="value-lower"],
+  :scope[dual] [slot="value-upper"] {
+    color: var(--a-fg);
+    font-weight: var(--slider-value-weight, var(--slider-value-weight-default));
+    font-variant-numeric: tabular-nums;
+  }
+
   [slot="thumb"]:hover {
     transform: translate(-50%, -50%) scale(1.05);
   }