React で再利用可能なレンジスライダーを作成する方法

ネイティブの HTML <input type="range"> は、React で単一値のスライダーを作る際の良い出発点です。その値を親コンポーネントに保持し、値、範囲、変更ハンドラーを再利用可能な RangeSlider に渡します。独立して選択する 2 つの値については、multi-range-slider-react が外部パッケージです。動作する統合を書く前に、そのリリース固有の API を確認する必要があります。

HTML <input> を使ってカスタムの RangeSlider React コンポーネントを作成する

現在の値を親に保持すると、アプリの他の場所で表示したり使用したりできます。親は value、min、max、onChange を直接の props として渡します。子はネイティブの input に同じ props を使い、状態を更新する前に入力の文字列値を数値に変換します。

次のブラウザー用マークアップは、ネイティブ コントロールの静的な図解です。React コンポーネントではなく、それ自体に実行時の出力はありません。

<label for="volume">Volume: <output id="volume-value">40</output></label>
<input id="volume" type="range" min="0" max="100" value="40">

React アプリでは、親コンポーネントと再利用可能なコンポーネントを別々のファイルに配置します。これらの完全な 1 行ファイルは、標準的な React アプリのビルドでサポートされる JSX を使用します。App.js では useState をインポートし、親の値を初期化して、一致する範囲、値、ハンドラーの props を子に渡します。

App.js: import { useState } from 'react'; import RangeSlider from './rangeSlider'; export default function App() { const [value, setValue] = useState(40); return <main><p>Volume: {value}</p><RangeSlider min={0} max={100} value={value} onChange={(event) => setValue(Number(event.currentTarget.value))} /></main>; }

rangeSlider.js では、それらの直接の props を受け取り、App.js が使うデフォルト エクスポートとしてコンポーネントをエクスポートします。

rangeSlider.js: export default function RangeSlider({ min, max, value, onChange }) { return <input type="range" min={min} max={max} value={value} onChange={onChange} aria-label="Volume" />; }

ここでは App が値を所有し、RangeSlider はその props からコントロールを描画します。ユーザーがつまみを動かすと、onChange は event.currentTarget.value から新しい値を読み取り、数値に変換して setValue を呼びます。React は更新された数値を描画し、input に戻します。input のアクセシブル名は、それが制御する値に合ったものにしてください。

イベントから状態への変換は通常の JavaScript を使い、React とは独立に示すことができます。

const currentValue = 40;
const event = { currentTarget: { value: '57' } };
const nextValue = Number(event.currentTarget.value);
const displayedValue = nextValue;
console.log(`Value: ${displayedValue}`);

Value: 57

実行可能なスニペットが示すのは数値変換と表示値だけです。上記の React コンポーネントは、同じ値がコンポーネントの状態にどう接続されるかを示します。この記事の実行証拠が対象とするのはこの JavaScript の変換であり、React や JSX の実行ではありません。

multi-range-slider-react ライブラリを使って React でマルチレンジスライダーを作成する

ネイティブのレンジ input は 1 つの現在の値を表します。multi-range-slider-react は外部パッケージであり、React に組み込まれたライブラリではありません。その npm パッケージ ページ にはパッケージのリリースが一覧されています。提供された資料は固定されたリリースを特定しておらず、そのリリースのドキュメントやソースも含んでいないため、動作する例に必要なコンポーネントの props やイベント ペイロードを裏付けることはできません。推測した props 名やイベント フィールドを統合にコピーしないでください。このパッケージを実装する前に、リリースを選択し、そのドキュメントやソースで下限値と上限値がどのように渡され返されるかを確認し、検証済みのそのバージョンをアプリケーションに固定してください。

この記事はまだ、動作する MultiRangeSlider の統合を示したり、選択された下限値と上限値を表示したり、パッケージのイベントによる親の状態更新を示したりすることはできません。それらの詳細は、選択したリリースの文書化された API に依存します。上記の実行可能な JavaScript の図解が対象とするのは、ネイティブな単一値の RangeSlider の数値変換だけであり、React やこのパッケージを実行するものではありません。

1 つの親管理の値が必要で、小さなコンポーネントを自分で所有したい場合は、ネイティブの RangeSlider を使用してください。パッケージを使う 2 値の実装では、その props と状態更新の経路を正確に示す前に、検証済みのリリース固有の API 詳細が必要です。これらは別々のアプローチであり、ネイティブ コンポーネントはパッケージでは使用されません。