Reactで、ドラッグで数値を増減できる入力欄を作る方法

import { useId, useRef, useState } from 'react';
import { roundToStep } from './roundToStep';

type Props = {
  label: string;
  value: number;
  onChange: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  pixelsPerStep?: number; // 何px動かすと step 1つ分変わるか
};

type Drag = {
  pointerId: number;
  startX: number;
  startValue: number;
  lastX: number;
  factor: number; // 1、Shift で 10
  moved: boolean;
};

export function DragNumberInput({
  label, value, onChange, min = -Infinity, max = Infinity, step = 1, pixelsPerStep = 2,
}: Props) {
  const id = useId();
  const drag = useRef<Drag | null>(null);
  const [draft, setDraft] = useState<string | null>(null); // 打っている途中の文字列

  function onPointerDown(e: React.PointerEvent<HTMLLabelElement>) {
    if (e.button !== 0) return;
    e.currentTarget.setPointerCapture(e.pointerId);
    drag.current = { pointerId: e.pointerId, startX: e.clientX, startValue: value, lastX: e.clientX, factor: 1, moved: false };
  }

  function onPointerMove(e: React.PointerEvent<HTMLLabelElement>) {
    const d = drag.current;
    if (!d || d.pointerId !== e.pointerId) return;
    const factor = e.shiftKey ? 10 : 1;
    if (factor !== d.factor) {
      // Shift を押した・離したときは、1つ前の位置と今の値から数え直す
      d.startX = d.lastX;
      d.startValue = value;
      d.factor = factor;
    }
    d.lastX = e.clientX;
    const dx = e.clientX - d.startX;
    if (Math.abs(dx) >= 3) d.moved = true;
    if (!d.moved) return;
    const steps = Math.trunc(dx / pixelsPerStep);
    const next = roundToStep(d.startValue + steps * step * factor, min, max, step);
    if (next !== value) onChange(next);
  }

  function endDrag() {
    // moved は、この後の click で使うので残しておく
    if (drag.current) drag.current.pointerId = -1;
  }

  function onClick(e: React.MouseEvent<HTMLLabelElement>) {
    // ドラッグの後の click では、入力欄にフォーカスを移さない
    if (drag.current?.moved) e.preventDefault();
    drag.current = null;
  }

  function commit(text: string) {
    const n = Number(text);
    if (text.trim() !== '' && Number.isFinite(n)) onChange(roundToStep(n, min, max, step));
    setDraft(null);
  }

  return (
    <div className="drag-number">
      <label
        htmlFor={id}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={endDrag}
        onPointerCancel={endDrag}
        onClick={onClick}
      >
        {label}
      </label>
      <input
        id={id}
        type="number"
        value={draft ?? String(value)}
        min={Number.isFinite(min) ? min : undefined}
        max={Number.isFinite(max) ? max : undefined}
        step={step}
        onChange={(e) => {
          const text = e.target.value;
          setDraft(text);
          const n = Number(text);
          // 範囲の中の数なら、打っている途中でもすぐに反映する
          if (text !== '' && n >= min && n <= max) onChange(n);
        }}
        onBlur={(e) => commit(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter') commit(e.currentTarget.value);
        }}
      />
    </div>
  );
}

<DragNumberInput label="幅" value={width} onChange={setWidth} min={20} max={300} step={1} />
<DragNumberInput label="不透明度" value={opacity} onChange={setOpacity} min={0} max={1} step={0.01} />
<div className="preview" style={{ width, opacity }} />
<p className="state">幅 {width} / 不透明度 {opacity}</p>

.drag-number label {
  width: 7em;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  border-bottom: 1px dashed #067a98;
  color: #067a98;
}

0.8 + -7 × 0.01 → そのまま 0.73 / roundToStep 0.73
0.8 + -37 × 0.01 → そのまま 0.43000000000000005 / roundToStep 0.43
0.8 + 3 × 0.01 → そのまま 0.8300000000000001 / roundToStep 0.83

// step の小数の桁数（0.01 なら 2）
function decimals(step: number): number {
  const s = String(step);
  return s.includes('.') ? s.split('.')[1].length : 0;
}

// v を、min を基準にした step の倍数に丸め、min〜max の中に収める
export function roundToStep(v: number, min: number, max: number, step: number): number {
  const base = Number.isFinite(min) ? min : 0;
  const n = Math.round((v - base) / step) * step + base;
  const fixed = Number(n.toFixed(decimals(step)));
  return Math.min(max, Math.max(min, fixed));
}