ReactJS 如何创建价格范围选择器

价格范围选择器允许我们选择代表范围的两个值。有时，我们需要创建一个范围滑块，让用户选择一个范围。

例如，我们可以让用户使用价格范围选择器选择一个最低和最高价格。我们还可以根据所选的最低和最高价格进行过滤来显示产品。

在本教程中，我们将学习使用ReactJS的各种库来创建一个价格范围选择器。

使用Material UI来创建一个范围选择器

Material UI提供了各种组件，我们可以将其导入到项目中并直接使用。它还包含滑块组件，它可以作为一个价格范围选择器使用。

用户应该使用下面的命令在项目中安装material Ui。

npm install @mui/material @emotion/react @emotion/styled

语法

用户可以按照下面的语法来使用素材ui库来创建一个价格范围选择器。

<Slider value={range} onChange={handleChanges} valueLabelDisplay="auto" />

在上面的语法中，我们使用了Material UI中的Slider组件来创建一个范围滑块。

例子1

在下面的例子中，我们首先导入了滑块组件。我们把值作为滑块组件的一个道具来传递。该值是一个由两个值组成的数组，代表价格范围选择器上的最小值和最大值。

同时，我们调用hanldleChange()函数，在用户改变滑块上的范围时更新价格范围。

import React from "react";
import Slider from "@mui/material/Slider";
function App() {
   const [range, setRange] = React.useState([5, 30]);
   function handleChanges(event, newValue) {
      setRange(newValue);
   }
   return (
      <div style = {{ width: "32rem", padding: "20px" }}>
         <h3> Creating the range slider using the material UI in react JS </h3>
         <Slider value = {range} onChange = {handleChanges} valueLabelDisplay="auto"/>
         The selected range is {range[0]} - {range[1]}
      </div>
   );
}
export default App;

输出

如何在ReactJS中创建价格范围选择器？

使用rsuite库

rsuite也是一个react库，有各种组件，如按钮、滑块、范围选择器等。这里，我们将使用rsuite库中的RangeSlider组件。

用户可以在终端执行以下命令，在应用程序中安装rsuite库。

npm i resuite

语法

用户可以按照下面的语法来使用rsuite库中的RangeSlider组件。

<RangeSlider defaultValue={[2, 10]} onChange={handleRanges} />

在上面的语法中，用户可以观察到我们如何传递RangeSlider组件的默认值。

例2

在下面的例子中，我们从rsuite库中导入了RangeSlider组件。同时，我们还从rsuite中导入了样式，在RangeSlider上应用了一些CSS。

在输出中，用户可以观察到选定的范围。

import React from "react";
import RangeSlider from "rsuite/RangeSlider";
import "rsuite/dist/rsuite.css";
import { useState } from "react";
function App() {
   const [firstValue, setFirstValue] = useState(2);
   const [secondValue, setSecondValue] = useState(10);
   function handleRanges(value) {
      setFirstValue(value[0]);
      setSecondValue(value[1]);
   }
   return (
      <div style = {{ width: "50rem", padding: "20px" }}>
         <h3>Creating the range slider using the <i> rsuit library</i> in react JS </h3>
         <br />
         <RangeSlider defaultValue={[2, 10]} onChange={handleRanges} />
         <br />
         The selected range value is {firstValue} - {secondValue}.
      </div>
   );
}
export default App;