React에서 재사용 가능한 범위 슬라이더 만들기
-
HTML
<input>을 사용하여 사용자 지정RangeSlider반응 구성 요소 생성 -
multi-range-slider-react라이브러리를 사용하여 React에서 다중 범위 슬라이더 만들기
이 기사에서는 React에서 범위 슬라이더를 만드는 방법을 알려줍니다.
HTML <input> 태그를 사용하여 범위 슬라이더를 만드는 것은 간단하지만 React에서 범위 슬라이더의 현재 값을 관리하는 방법을 배웁니다. 또한 RangeSlider 구성 요소를 재사용하여 다른 구성 요소 내에서 재사용할 수 있도록 만들 것입니다.
HTML <input>을 사용하여 사용자 지정 RangeSlider 반응 구성 요소 생성
이 예제에서는 App.js 및 rangeSlider.js라는 두 개의 파일을 만들었습니다. App.js 파일에서 RangeSlider 구성 요소를 가져와서 재사용했으며 상위 구성 요소인 App에서 범위 슬라이더의 현재 값을 관리하고 있습니다.
또한 RangeSlider 구성 요소 내부에 소품을 전달했습니다. 소품으로 RangeSlider 구성 요소에서 가져오는 value 변수를 전달했습니다.
또한 범위 슬라이더의 최소값과 최대값을 sliderProps라는 객체 형태로 전달했습니다.
handleValueChange()는 RangeSlider 구성 요소 내부의 소품으로 전달되고 onChange 변수 내부에 저장됩니다.
<RangeSlider {...sliderProps} onChange={handleValueChange} value={inputValue} />
rangeSlider.js 파일 내에서 부모 구성 요소의 소품에서 가져온 슬라이더의 현재 값을 표시하고 있습니다. <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에서 다중 범위 슬라이더 만들기
위의 예에서 단일 범위 슬라이더를 만들어 재사용했습니다. 이제 multi-range-slider-react 내장 React 라이브러리를 사용하여 다중 범위 슬라이더를 생성합니다.
다중 범위 슬라이더를 사용하면 사용자가 최소값과 최대값을 개별적으로 설정할 수 있습니다.
React 앱에서 multi-range-slider-react 라이브러리를 사용하려면 먼저 설치해야 합니다. 애플리케이션에 multi-range-slider-react 라이브러리를 설치하려면 React 앱의 디렉토리에서 터미널을 열고 다음 명령을 실행하십시오.
npm install multi-range-slider-react
그런 다음 라이브러리를 React 앱으로 가져오고 MultiRangeSlider 구성 요소를 사용할 수 있습니다. 또한 MultiRangeSlider 구성 요소에서 일부 값을 소품으로 전달할 수 있습니다.
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;
출력:
위 출력에서 사용자는 다중 범위 슬라이더를 통해 슬라이더의 최소값과 최대값을 설정할 수 있음을 알 수 있습니다.
이 기사에서 단일 범위 및 다중 범위 슬라이더를 만드는 방법을 배웠고 두 가지 모두에 대해 재사용 가능한 구성 요소를 사용했습니다.
