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

react jsweb developmentfront end technology

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

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

在本教程中，我们将学习如何使用 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 组件。我们将值作为 Slider 组件的 prop 传递。该值是一个由两个值组成的数组，分别代表价格范围选择器上的最小值和最大值。

此外，每当用户更改滑块上的范围时，我们都会调用 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;