如何在 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+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告