Reactで、2つのつまみで範囲を選ぶスライダーを作る方法

import { useId, useRef } from 'react';

type Props = {
  label: string;
  min: number;
  max: number;
  step?: number;
  value: [number, number];
  onChange: (value: [number, number]) => void;
  names?: [string, string];
  format?: (n: number) => string;
};

export function RangeSlider({ label, min, max, step = 1, value, onChange, names, format = String }: Props) {
  const [low, high] = value;
  const labelId = useId();
  // 上限のつまみを押した時点で2つが重なっていたら true（最初に値が動くまで）
  const startedOverlapped = useRef(false);
  // 重なった状態から最初に左へ動いたら true。ドラッグが終わるまで、上限ではなく下限を動かす
  const moveLowInstead = useRef(false);

  // 値を、つまみの動く範囲の中の割合（%）にする
  const percent = (v: number) => ((v - min) / (max - min)) * 100;

  function handleLowChange(v: number) {
    // 下限は上限を越えない
    onChange([Math.min(v, high), high]);
  }

  function handleHighChange(v: number) {
    if (startedOverlapped.current) {
      // 最初に動いた向きで、このドラッグで動かすつまみを決める
      moveLowInstead.current = v < low;
      startedOverlapped.current = false;
    }
    if (moveLowInstead.current) {
      handleLowChange(v);
      return;
    }
    // 上限は下限を下回らない
    onChange([low, Math.max(v, low)]);
  }

  function endPress() {
    startedOverlapped.current = false;
    moveLowInstead.current = false;
  }

  return (
    <div className="range" role="group" aria-labelledby={labelId}>
      <div className="range-header">
        <span id={labelId}>{label}</span>
        <span className="range-value">
          {format(low)} 〜 {format(high)}
        </span>
      </div>
      <div
        className="range-track"
        style={{ '--low': `${percent(low)}%`, '--high': `${percent(high)}%` } as React.CSSProperties}
      >
        <input
          type="range"
          min={min}
          max={max}
          step={step}
          value={low}
          name={names?.[0]}
          aria-label={`${label}の下限`}
          aria-valuetext={format(low)}
          onChange={(e) => handleLowChange(Number(e.target.value))}
        />
        <input
          type="range"
          min={min}
          max={max}
          step={step}
          value={high}
          name={names?.[1]}
          aria-label={`${label}の上限`}
          aria-valuetext={format(high)}
          onPointerDown={() => {
            startedOverlapped.current = low === high;
            moveLowInstead.current = false;
          }}
          onPointerUp={endPress}
          onPointerCancel={endPress}
          onChange={(e) => handleHighChange(Number(e.target.value))}
        />
      </div>
    </div>
  );
}

import { useState } from 'react';
import { RangeSlider } from './RangeSlider';

const PRICES = [1980, 4500, 8800, 12000, 15800, 19800, 24000, 29800, 36000, 42000, 48000];
const yen = (n: number) => `${n.toLocaleString('ja-JP')}円`;

export function App() {
  const [price, setPrice] = useState<[number, number]>([10000, 30000]);
  const [sent, setSent] = useState('');
  const count = PRICES.filter((p) => price[0] <= p && p <= price[1]).length;

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    setSent(JSON.stringify(Object.fromEntries(data)));
  }

  return (
    <form onSubmit={handleSubmit}>
      <RangeSlider
        label="価格"
        min={0}
        max={50000}
        step={1000}
        value={price}
        onChange={setPrice}
        names={['min_price', 'max_price']}
        format={yen}
      />
      <p className="count">{count}件の商品</p>
      <button type="submit">この条件で探す</button>
      <output className="sent">{sent}</output>
    </form>
  );
}

下限のつまみを 10000 → 20000 の位置へドラッグ: 下限 20000 上限 30000 / 表示「20,000円 〜 30,000円」 / 2件の商品
上限のつまみを 30000 → 45000 の位置へドラッグ: 下限 20000 上限 45000 / 表示「20,000円 〜 45,000円」 / 4件の商品
下限のつまみを 20000 → 0 の位置（左端）へドラッグ: 下限 0 上限 45000 / 表示「0円 〜 45,000円」 / 10件の商品
上限のつまみを 45000 → 50000 の位置（右端）へドラッグ: 下限 0 上限 50000 / 表示「0円 〜 50,000円」 / 11件の商品

.range-track {
  position: relative;
  height: 28px;
}
/* 線は、つまみの半径（10px）だけ内側から描く */
.range-track::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 12px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    #d5dde1 var(--low),
    #00c8e8 var(--low),
    #00c8e8 var(--high),
    #d5dde1 var(--high)
  );
}
.range-track input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: none;
  /* input の箱はクリックを受けず、つまみだけが受ける */
  pointer-events: none;
}
.range-track input::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border: 2px solid #00c8e8;
  border-radius: 50%;
  background: #fff;
  cursor: grab;
}

pointer-events: none あり（この記事の書き方）
下限のつまみの位置にある要素: 価格の下限
下限のつまみを 10000 → 20000 の位置へドラッグ: 下限 20000 上限 30000 / 表示「20,000円 〜 30,000円」 / 2件の商品
線の上（45000 の位置）をクリック: 下限 20000 上限 30000 / 表示「20,000円 〜 30,000円」 / 2件の商品

pointer-events: none なし
下限のつまみの位置にある要素: 価格の上限
下限のつまみを 10000 → 20000 の位置へドラッグ: 下限 10000 上限 20000 / 表示「10,000円 〜 20,000円」 / 3件の商品
線の上（45000 の位置）をクリック: 下限 10000 上限 45000 / 表示「10,000円 〜 45,000円」 / 7件の商品

40000 の位置まで動かした（ボタンは押したまま）: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」 / 0件の商品
ボタンを離した: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」 / 0件の商品

下限を 10000 → 40000 の位置へドラッグ: 下限 40000 上限 30000 / 表示「40,000円 〜 30,000円」

この記事の書き方
下限を 30000 まで動かして重ねる: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」 / 0件の商品
重なったつまみを左（20000）へドラッグ: 下限 20000 上限 30000 / 表示「20,000円 〜 30,000円」 / 2件の商品
下限を 30000 まで動かして重ねる: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」 / 0件の商品
重なったつまみを右（40000）へドラッグ: 下限 30000 上限 40000 / 表示「30,000円 〜 40,000円」 / 1件の商品
キーボードで2つとも右端（50000）にする: 下限 50000 上限 50000 / 表示「50,000円 〜 50,000円」 / 0件の商品
右端で重なったつまみを左（35000）へドラッグ: 下限 35000 上限 50000 / 表示「35,000円 〜 50,000円」 / 3件の商品

越えないようにするだけの書き方
下限を 30000 まで動かして重ねる: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」
重なったつまみを左（20000）へドラッグ: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」
下限を 30000 まで動かして重ねる: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」
重なったつまみを右（40000）へドラッグ: 下限 30000 上限 40000 / 表示「30,000円 〜 40,000円」
キーボードで2つとも右端（50000）にする: 下限 50000 上限 50000 / 表示「50,000円 〜 50,000円」
右端で重なったつまみを左（35000）へドラッグ: 下限 50000 上限 50000 / 表示「50,000円 〜 50,000円」

上限のつまみを 30000 → 5000 の位置へドラッグ: 下限 10000 上限 10000 / 表示「10,000円 〜 10,000円」 / 0件の商品
下限を 30000 まで動かして重ねる: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」 / 0件の商品
重なったつまみを 20000 の位置まで左へ（ボタンは押したまま）: 下限 20000 上限 30000 / 表示「20,000円 〜 30,000円」 / 2件の商品
そのまま 40000 の位置まで右へ戻す: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」 / 0件の商品
下限を 30000 まで動かして重ねる: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」 / 0件の商品
重なったつまみを 40000 の位置まで右へ（ボタンは押したまま）: 下限 30000 上限 40000 / 表示「30,000円 〜 40,000円」 / 1件の商品
そのまま 20000 の位置まで左へ戻す: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」 / 0件の商品

重ねてから、上限にフォーカスして ArrowLeft: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」 / 0件の商品
Shift+Tab で下限に移って ArrowLeft: 下限 29000 上限 30000 / 表示「29,000円 〜 30,000円」 / 1件の商品

Tab: 価格の下限
ArrowRight: 下限 11000 上限 30000 / 表示「11,000円 〜 30,000円」 / 5件の商品
ArrowUp: 下限 12000 上限 30000 / 表示「12,000円 〜 30,000円」 / 5件の商品
ArrowLeft: 下限 11000 上限 30000 / 表示「11,000円 〜 30,000円」 / 5件の商品
PageUp: 下限 16000 上限 30000 / 表示「16,000円 〜 30,000円」 / 3件の商品
End: 下限 30000 上限 30000 / 表示「30,000円 〜 30,000円」 / 0件の商品
Home: 下限 0 上限 30000 / 表示「0円 〜 30,000円」 / 8件の商品
Tab: 価格の上限
Home: 下限 0 上限 0 / 表示「0円 〜 0円」 / 0件の商品
End: 下限 0 上限 50000 / 表示「0円 〜 50,000円」 / 11件の商品

- group "価格":
  - text: 価格 10,000円 〜 30,000円
  - slider "価格の下限": "10000"
  - slider "価格の上限": "30000"

送信された値: {"min_price":"15000","max_price":"30000"}