Range slider

"use client";

import { useId, useRef, useState } from "react";
import type { ComponentProps, CSSProperties, KeyboardEvent, PointerEvent, ReactNode } from "react";
import "./range-slider.css";

type Range = [number, number];

export type RangeSliderProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "children"> & {
  /** Visible label. Each thumb is named "Minimum" or "Maximum" followed by it. */
  label: ReactNode;
  value?: Range;
  defaultValue?: Range;
  onValueChange?: (value: Range) => void;
  min?: number;
  max?: number;
  step?: number;
  /** Smallest distance kept between the two thumbs. */
  minGap?: number;
  /** Turns a value into text for the readout and for assistive tech, e.g. "$40". */
  format?: (n: number) => string;
  /** Submits two hidden inputs, name[0] and name[1]. */
  name?: string;
  disabled?: boolean;
};

function decimals(n: number) {
  const text = String(n);
  const dot = text.indexOf(".");
  return dot === -1 ? 0 : text.length - dot - 1;
}

export function RangeSlider({
  label,
  value,
  defaultValue,
  onValueChange,
  min = 0,
  max = 100,
  step = 1,
  minGap = 0,
  format = String,
  name,
  disabled = false,
  className,
  style,
  ...rest
}: RangeSliderProps) {
  const id = useId();
  const trackRef = useRef<HTMLDivElement>(null);
  const thumbRefs = [useRef<HTMLDivElement>(null), useRef<HTMLDivElement>(null)];
  const [inner, setInner] = useState<Range>(() => defaultValue ?? [min, max]);
  const [active, setActive] = useState<0 | 1>(1);
  const [pressed, setPressed] = useState(false);
  const [dragging, setDragging] = useState(false);
  const undecided = useRef(false);
  const current = value ?? inner;
  const [lo, hi] = current;
  const span = max - min;
  const places = decimals(step);

  const snap = (n: number) => Number((min + Math.round((n - min) / step) * step).toFixed(places));
  const bounds = (index: 0 | 1): Range => (index === 0 ? [min, hi - minGap] : [lo + minGap, max]);
  const fraction = (n: number) => (span > 0 ? Math.min(1, Math.max(0, (n - min) / span)) : 0);

  function commit(index: 0 | 1, n: number) {
    const [floor, ceil] = bounds(index);
    const next = Math.min(ceil, Math.max(floor, snap(n)));
    if (next === current[index]) return;
    const range: Range = index === 0 ? [next, hi] : [lo, next];
    if (value === undefined) setInner(range);
    onValueChange?.(range);
  }

  function valueAt(clientX: number) {
    const track = trackRef.current;
    if (!track) return min;
    const box = track.getBoundingClientRect();
    return min + span * Math.min(1, Math.max(0, (clientX - box.left) / box.width));
  }

  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {
    if (disabled || event.button !== 0) return;
    event.preventDefault();
    const n = valueAt(event.clientX);
    // The nearer thumb moves; when they sit together, the side of the click decides.
    const index: 0 | 1 = lo === hi ? (n < lo ? 0 : 1) : Math.abs(n - lo) <= Math.abs(n - hi) ? 0 : 1;
    event.currentTarget.setPointerCapture(event.pointerId);
    // Pressed right on stacked thumbs: the direction of the drag decides which one moves.
    undecided.current = lo === hi && snap(n) === lo;
    setActive(index);
    setPressed(true);
    thumbRefs[index].current?.focus();
    commit(index, n);
  }

  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
    if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
    setDragging(true);
    const n = valueAt(event.clientX);
    let index = active;
    if (undecided.current) {
      if (snap(n) === lo) return;
      undecided.current = false;
      index = n < lo ? 0 : 1;
      setActive(index);
      thumbRefs[index].current?.focus();
    }
    commit(index, n);
  }

  function handlePointerEnd() {
    setPressed(false);
    setDragging(false);
  }

  function handleKeyDown(index: 0 | 1, event: KeyboardEvent<HTMLDivElement>) {
    if (disabled) return;
    const big = Math.max(step, Math.round(span / 10 / step) * step);
    const n = current[index];
    const [floor, ceil] = bounds(index);
    const moves: Record<string, number> = {
      ArrowRight: n + step,
      ArrowUp: n + step,
      ArrowLeft: n - step,
      ArrowDown: n - step,
      PageUp: n + big,
      PageDown: n - big,
      Home: floor,
      End: ceil,
    };
    if (!(event.key in moves)) return;
    event.preventDefault();
    setActive(index);
    commit(index, moves[event.key]);
  }

  return (
    <div
      role="group"
      aria-labelledby={`${id}-label`}
      {...rest}
      className={["eq-range-slider", className].filter(Boolean).join(" ")}
      style={{ ...style, "--_lo": fraction(lo), "--_hi": fraction(hi) } as CSSProperties}
      data-disabled={disabled || undefined}
    >
      <div className="eq-range-slider-header">
        <span className="eq-range-slider-label" id={`${id}-label`}>
          {label}
        </span>
        {/* Each thumb announces its own value, so the readout stays out of the way. */}
        <span className="eq-range-slider-values" aria-hidden="true">
          {format(lo)} to {format(hi)}
        </span>
      </div>
      <div
        ref={trackRef}
        className="eq-range-slider-track"
        data-dragging={dragging || undefined}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerEnd}
        onPointerCancel={handlePointerEnd}
      >
        <div className="eq-range-slider-fill" />
        {([0, 1] as const).map((index) => {
          const [floor, ceil] = bounds(index);
          return (
            <div
              key={index}
              ref={thumbRefs[index]}
              className="eq-range-slider-thumb"
              role="slider"
              tabIndex={disabled ? -1 : 0}
              aria-labelledby={`${id}-thumb-${index} ${id}-label`}
              aria-valuemin={floor}
              aria-valuemax={ceil}
              aria-valuenow={current[index]}
              aria-valuetext={format(current[index])}
              aria-orientation="horizontal"
              aria-disabled={disabled || undefined}
              data-thumb={index === 0 ? "min" : "max"}
              data-active={active === index || undefined}
              data-pressed={(pressed && active === index) || undefined}
              onKeyDown={(event) => handleKeyDown(index, event)}
              onFocus={() => setActive(index)}
            >
              <span className="eq-range-slider-sr" id={`${id}-thumb-${index}`}>
                {index === 0 ? "Minimum" : "Maximum"}
              </span>
            </div>
          );
        })}
      </div>
      {name && (
        <>
          <input type="hidden" name={`${name}[0]`} value={lo} disabled={disabled} />
          <input type="hidden" name={`${name}[1]`} value={hi} disabled={disabled} />
        </>
      )}
    </div>
  );
}