如何在Material UI中使用滑块组件

对于任何应用程序来说，滑块都是一个重要的功能，可以改善应用程序的用户体验。例如，如果你想让用户在1到100之间选择任何数值，那么使用滑块会比自定义数字输入栏更好。

Material UI提供了预先设计好的滑块组件。此外，它还包含了滑块组件的不同变体。我们可以将道具传递给滑块组件来定制它。

在项目目录下执行以下命令，将Material UI安装到React应用程序中。

npm i @mui/material @emotion/react @emotion/style

语法

用户可以按照下面的语法来使用Material UI的Slider组件。

<Slider
   defaultValue = {50}
   value = {value}
/>

在上面的语法中，我们将’defaultValue’和’value’道具传递给了Slider组件。

例子1（基本滑块）

在下面的例子中，我们使用Material UI的Slider组件创建了一个基本的滑块。我们把’尺寸’和’defaultValue’作为道具传递。另外，每当用户改变滑块的值时，我们就调用handleRangeSlider()函数，在滑块组件中显示所选的值。

import React, { useState } from "react";
import Slider from "@mui/material/Slider";
const App = () => {
   const [value, setValue] = useState(50);
   function handleRangeSlider(event, value) {
      setValue(value);
   }
   return (
      <div>
         <h3>
            {" "}
            Using the <i> Slider </i> Component of the Material UI to create a basic slider. {" "}
         </h3>
         <div style = {{ width: "300px" }}>
            <Slider
               size = "small"
               defaultValue = {50}
               valueLabelDisplay = "auto"
               value = {value}
               onChange = {handleRangeSlider}
            />
         </div>
         <h4> You have selected {value} in range slider </h4>
      </div>
   );
};
export default App;

输出

如何在Material UI中使用滑块组件？

例2（带台阶的滑块）

在下面的例子中，我们使用Material UI的Slider组件创建了一个带台阶的滑块。滑块的最小值是5，最大值是50。用户可以在滑块中只选择5的倍数，因为我们使用了5作为阶梯道具的值。

import React, { useState } from "react";
import Slider from "@mui/material/Slider";
const App = () => {
   const [value, setValue] = useState(50);
   function handleRangeSlider(value) {
      setValue(value);
   }
   return (
      <div>
         <h3>
            {" "}
            Using the <i> Slider </i> Component of the Material UI to create a slider with custom steps. {" "}
         </h3>
         <div style = {{ width: "300px" }}>
            <Slider
               aria-label = "discrete slider."
               defaultValue = {30}
               getAriaValueText = {handleRangeSlider}
               valueLabelDisplay = "auto"
               step = {5}
               marks
               min = {5}
               max = {50}
            />
         </div>
         <h4> You have selected {value} in range slider </h4>
      </div>
   );
};
export default App;

输出

在输出中，用户可以观察到，每当他们改变滑块的值时，它就会在标签中显示所选的值。

如何在Material UI中使用滑块组件？

例3（范围滑块）

在下面的例子中，我们使用Slider组件创建了范围滑块。范围滑块允许用户选择任何特定的范围。我们用长度为2的数组初始化了’range’变量。每当用户改变范围时，我们执行handleRangeSlider()函数并在’range’变量中设置新范围。

import React, { useState } from "react";
import Slider from "@mui/material/Slider";
const App = () => {
   const [range, setRange] = useState([15, 65]);
   function handleRangeSlider(e, range) {
      setRange(range);
   }
   return (
      <div>
         <h3>
            {" "}
            Using the <i> Slider </i> Component of the Material UI to create a Range slider with custom steps {" "}
         </h3>
         <div style = {{ width: "300px" }}>
            <Slider
               getAriaLabel = {() => "Select Range"}
               value = {range}
               onChange = {handleRangeSlider}
               valueLabelDisplay = "auto"
               getAriaValueText = {() => {
                  return `${range}`;
               }}
            />
         </div>
         <h4>
            {" "}
            You have selected {range[0]}, {range[1]} in range slider. {" "}
         </h4>
      </div>
   );
};
export default App;

输出

同时，我们通过访问范围数组在输出中显示范围值。

如何在Material UI中使用滑块组件？

例子4（自定义台阶）

在下面的例子中，我们在Slider组件中加入了自定义标记。例如，如果我们想让用户只选择某些值，我们应该在Slider组件中使用标记。

我们将标记设置为2、4、8、16、32和64。因此，用户可以在滑块上只选择这些值。我们为标记创建了一个对象数组，并将该数组作为滑块组件的一个道具来传递。

import React, { useState } from "react";
import Slider from "@mui/material/Slider";
const App = () => {
   const [value, setValue] = useState(64);
   const marks = [
      {
         value: 2,
         label: "2",
      },
      {
         value: 4,
         label: "4",
      },
      {
         value: 8,
         label: "8",
      },
      {
         value: 16,
         label: "16",
      },
      {
         value: 32,
         label: "32",
      },
      {
         value: 64,
         label: "64",
      },
   ];
   function handleSlider(e, value) {
      setValue(value);
   }
   return (
      <div>
         <h3>
            {" "}
            Using the <i> Slider </i> Component of the Material UI to create a Range slider with custom steps. {" "}
         </h3>
         <div style = {{ width: "300px" }}>
            <Slider
               aria-label = "Custom steps in the slider."
               defaultValue = {64}
               onChange = {handleSlider}
               valueLabelDisplay = "auto"
               step = {null}
               getAriaValueText = {() => {
                  return `${value}`;
               }}
            marks = {marks}
            />
         </div>
         <h4> You have selected {value} in the slider. </h4>
      </div>
   );
};
export default App;