React で再利用可能な範囲スライダーを作成する
-
HTML
<input>を使用してカスタムRangeSliderReact コンポーネントを作成する -
multi-range-slider-reactライブラリを使用して React でマルチレンジ スライダーを作成する
この記事では、React でレンジ スライダーを作成する方法を説明します。
HTML の <input> タグを使用してレンジ スライダーを作成するのは簡単ですが、React でレンジ スライダーの現在の値を管理する方法を学習します。 また、RangeSlider コンポーネントを再利用可能にして、別のコンポーネント内で再利用します。
HTML <input> を使用してカスタム RangeSlider React コンポーネントを作成する
この例では、App.js と rangeSlider.js という 2つのファイルを作成しました。 App.js ファイルでは、RangeSlider コンポーネントをインポートして再利用し、親コンポーネント App からレンジ スライダーの現在の値を管理しています。
さらに、RangeSlider コンポーネント内で props を渡しました。 prop として、RangeSlider コンポーネントから取得する value 変数を渡しました。
また、sliderProps という名前のオブジェクトの形式で、範囲スライダーの最小値と最大値を渡しました。
handleValueChange() は RangeSlider コンポーネント内の prop として渡され、onChange 変数内に保存されます。
<RangeSlider {...sliderProps} onChange={handleValueChange} value={inputValue} />
rangeSlider.js ファイル内で、親コンポーネントの props で取得したスライダーの現在の値を表示しています。 <input> タグを使用して HTML 範囲スライダーを作成し、親コンポーネントから sliderProps オブジェクトで取得した値を使用して min および max 属性の値を設定しました。
onChange イベントが HTML 入力に対してトリガーされるたびに、onChange 変数内に保存されている関数 handleValueChange() が呼び出されます。
<input {...props.sliderProps} type="range" value={props.value} onChange={props.onChange} />
以下に示すコード例を実行する前に、コードがそれぞれのファイルに追加され、ファイル名が正しく指定されていることを確認する必要があります。 そうしないと、インポート エラーが発生する可能性があります。
コード例:
import { useState } from 'react';
// import reusable slider component
import RangeSlider from './rangeSlider'
function App() {
// set slider props
const [sliderProps, setSliderProps] = useState({
min: 0,
max: 250,
});
// set input value
const [inputValue, setinputValue] = useState(0);
// handle the changes in the input value of the range slider
const handleValueChange = e => {
setinputValue(e.target.value);
};
return (
// reuse the range slider component
// passed some values as props to use inside the RangeSlider component
<RangeSlider
{...sliderProps}
onChange={handleValueChange}
value={inputValue} />
);
}
export default App;
function RangeSlider(props) {
return (
<div>
<p>Reusable Slider Component In React</p>
{/* showing the value of the range slider in the child component, which we are getting from the parent component in the form of props */}
<h3>Slider Value: {props.value}</h3>
{/* slider input */}
<input
{...props.sliderProps}
type="range"
value={props.value}
onChange={props.onChange}
/>
</div>
);
}
// export range slider component
export default RangeSlider;
出力：
上記の出力は、再利用可能な RangeSlider コンポーネントが通常のコンポーネントのようにどのように機能するかを示しています。 また、ユーザーは画面上のレンジ スライダーの現在の値を確認できます。
multi-range-slider-react ライブラリを使用して React でマルチレンジ スライダーを作成する
上記の例では、単一の範囲スライダーを作成し、それを再利用しました。 次に、組み込みの React ライブラリ multi-range-slider-react を使用して、マルチレンジ スライダーを作成します。
マルチレンジ スライダーにより、ユーザーは最小値と最大値を個別に設定できます。
React アプリで multi-range-slider-react ライブラリを使用するには、まずそれをインストールする必要があります。 multi-range-slider-react ライブラリをアプリケーションにインストールするには、React アプリのディレクトリでターミナルを開き、次のコマンドを実行します。
npm install multi-range-slider-react
その後、ライブラリを React アプリにインポートし、MultiRangeSlider コンポーネントを使用できます。 また、MultiRangeSlider コンポーネントでいくつかの値を prop として渡すことができます。
MultiRangeSlider コンポーネントを使用するための構造を以下に示します。
<MultiRangeSlider min={0} max={50} step={2} minValue={mini} maxValue={maxi} onInput={(e) => { handleChangeInput(e); }} />
MultiRangeSlider コンポーネントを使用するための完全なサンプル コードをここに記述しました。 入力に変更が発生するたびに、handleChangeInput() 関数を呼び出します。
コード例:
// import required libraries
import React, { useState } from "react";
import MultiRangeSlider from "multi-range-slider-react";
function App() {
// set the initial minimum and maximum value for the multi-range slider
const [mini, changeMinValue] = useState(2);
const [maxi, changeMaxValue] = useState(13);
// whenever input changes, set a new value for mini and maxi
const handleChangeInput = (e) => {
changeMinValue(e.minValue);
changeMaxValue(e.maxValue);
};
return (
<div >
{/* rendering mini and maxi value on the DOM */}
<h3>Current Minimum Value Of slider is: {mini}</h3>
<h3>Current Maximum Value Of slider is: {maxi}</h3>
{/* using the MultiRangeSlider Component */}
<MultiRangeSlider
min={0}
max={50}
step={2}
minValue={mini}
maxValue={maxi}
onInput={(e) => {
handleChangeInput(e);
}}
/>
</div>
);
}
export default App;
出力：
上記の出力では、マルチレンジ スライダーでスライダーの最小値と最大値を設定できることがわかります。
この記事では、単一範囲と複数範囲のスライダーを作成する方法を学び、両方に再利用可能なコンポーネントを使用しました。
