数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 Material UI 中使用 Slider 组件？
滑块是任何应用程序中一个重要的功能，可以提升应用程序的用户体验。例如，如果您想允许用户在 1 到 100 之间选择任何值，使用滑块比使用自定义数字输入字段更好。
Material UI 提供了预先设计的 Slider 组件。此外，它还包含 Slider 组件的不同变体。我们可以将 props 传递给 Slider 组件来自定义它。
在项目目录中执行以下命令，以在 React 应用程序中安装 Material UI。
npm i @mui/material @emotion/react @emotion/style
语法
用户可以按照以下语法使用 Material UI 的 Slider 组件。
<Slider
defaultValue = {50}
value = {value}
/>
在上面的语法中，我们将 'defaultValue' 和 'value' props 传递给了 Slider 组件。
示例 1（基本滑块）
在下面的示例中，我们使用 Material UI 的 Slider 组件创建了一个基本滑块。我们传递了 'Size' 和 'defaultValue' 作为 props。此外，每当用户更改滑块的值时，我们都会调用 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;
输出
示例 2（带步长的滑块）
在下面的示例中，我们使用 Material UI 的 Slider 组件创建了一个带步长的滑块。滑块的最小值为 5，最大值为 50。用户只能在滑块中选择 5 的倍数，因为我们使用了 5 作为 steps prop 的值。
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;
输出
在输出中，用户可以观察到，每当他们更改滑块的值时，标签中都会显示选定的值。
示例 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;
输出
此外，我们通过访问 range 数组在输出中显示范围值。
示例 4（自定义步长）
在下面的示例中，我们在 Slider 组件中添加了自定义标记。例如，如果我们想允许用户仅选择某些值，则应将标记与 Slider 组件一起使用。
我们在 2、4、8、16、32 和 64 处设置了标记。因此，用户只能在滑块上选择这些值。我们为标记创建了一个对象数组，并将该数组作为 Slider 组件的 prop 传递。
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;
输出
在本教程中，我们学习了如何在 React 应用程序中使用 Material UI 库的 Slider 组件。我们通过不同的示例了解了 Slider 组件的不同变体。
第一个示例演示了滑块组件的基本用法。在第二个示例中，我们在滑块中添加了步长。在第三个示例中，我们创建了范围滑块；在最后一个示例中，我们在滑块组件中添加了自定义标记。
2K+ 浏览量
