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

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

例如，我们可以允许用户使用价格范围选择器选择最小和最大价格。我们还可以根据所选的最小和最大价格进行过滤来显示产品。

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

使用 Material UI 创建范围选择器

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

用户应使用以下命令在项目中安装 Material UI。

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

语法

用户可以按照以下语法使用 Material UI 库创建价格范围选择器。

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

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

示例 1

在下面的示例中，我们首先导入了 Slider 组件。我们将 value 作为滑块组件的 prop 传递。value 是一个包含两个值的数组，表示价格范围选择器上的最小值和最大值。

此外，我们调用 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;

输出

使用 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;

输出

我们学习了两种在 ReactJS 中创建价格范围选择器的不同方法。第一种方法是使用 Material UI 库，另一种是使用 rsuite 库。用户应根据自己的需求使用任何库，因为每个库都包含其自身的功能。

更新于: 2023 年 2 月 16 日

6K+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始
广告