数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 Material UI 中创建带输入框的滑块？
由于 Material UI 提供了 Slider 组件，React 开发人员可以轻松地在 React 中添加或使用滑块。在 Material UI 中，除了使用普通滑块外，我们还可以定义一个输入框，以便用户手动输入自定义值。在本文中，我们将学习如何在 Material UI 中创建带输入框的滑块。
带输入框的滑块是什么？
带输入框的滑块是一种用户界面元素，它结合了两种输入技术，用于从预定范围内选择数值。通常，它包含一个滑块元素和一个紧挨着的输入框。用户可以通过滑块以视觉和交互的方式拖动滑块上的手柄来调整值，而输入框用户可以手动输入特定的值。
使用的 API
<Slider> − 此 API 用于创建滑块组件，允许用户在 React MUI 中不同范围的项目中进行选择
属性
aria-label − 此属性用于添加滑块标签。
aria-labelledby − 此属性用于添加包含滑块标签的元素的 ID。
aria-valuetext − 此属性用于为滑块的值添加名称。
classes − 此属性用于覆盖或向组件添加样式。
color − 此属性用于向滑块组件添加不同的颜色。
components − 此属性用于为每个滑块插槽添加组件。
componentsProps − 此属性用于为插槽组件添加属性。
defaultValue − 此属性用于添加默认值。
disabled − 此属性用于禁用滑块组件。
disableSwap − 此属性允许您在拖动另一个手柄时，不交换鼠标指针悬停在某个手柄上的滑块。
getAriaLabel − 此属性用于添加一个返回滑块标签名称的函数。
getAriaValueText − 此属性用于添加一个返回滑块标签当前值的函数。
marks − 此属性用于向滑块添加预定值。
max − 此属性用于向滑块添加最大值。
min − 此属性用于向滑块添加最小值。
name − 此属性用于添加隐藏输入框的名称。
onChange − 此属性用于在触发滑块值时添加回调函数。
orientation − 此属性用于更改滑块组件的方向。
scale − 此属性用于更改滑块比例。
size − 此属性用于更改滑块的大小。
slotProps − 此属性用于在滑块内添加不同的属性。
slots − 此属性用于在滑块内添加组件。
step − 此属性用于在滑块中添加步长。
sx − 此属性用于在 Material UI 中添加样式。
track − 此属性用于向滑块添加不同的轨道。
value − 此属性用于向滑块添加值。
valueLabelDisplay − 此属性用于控制标签的显示值。
创建带输入框的滑块的步骤
以下是使用 Material UI 创建带输入框的滑块的步骤，以及它们各自的语法：
步骤 1：创建 React 应用程序
在进一步创建滑块之前，我们必须拥有一个 React 应用程序。要创建一个新的 React 应用程序，请在您的终端中运行以下命令：
npx create react app sliderproject
项目创建完成后，通过运行以下命令导航到其目录：
cd sliderproject
步骤 2：安装 Material UI
创建 React 应用程序后，是时候将 Material UI 安装到 React 应用程序中了。要安装 MUI，请运行以下命令：
npm install @mui/material @emotion/react @emotion/styled
步骤 3：导入并定义滑块
现在，让我们在主 App 组件中导入并定义滑块组件。
import React from "react";
import Slider from "@mui/material/Slider"
const App = () => {
function valuetext(val) {
return `${val}`;
}
return (
<div style={{
padding: 40,
width: '50%'
}}>
<Slider value onChange/>
<Input
value={value}
onChange={handleInputChange}
inputProps={{
step: 5,
min: 0,
max: 50,
}}
/>
</div>
);
};
export default App;
步骤 4：运行项目
要运行 React MUI 应用程序，请在终端中运行以下命令：
npm run start
关于带输入框的滑块的创建就是这样了。现在，让我们看看一些不同方法的示例。
示例
在此示例中，我们在 Material UI 中创建了一个基本的带输入框的滑块。使用输入框可以帮助用户轻松跳转到他们所需的选中点，并且使用户界面保持简洁和井然有序。
import React from "react";
import Slider from "@mui/material/Slider"
import Input from '@mui/material/Input';
const App = () => {
const [val, setVal] = React.useState(48);
const handleSliderInput = (e, newValue) => {
setVal(newValue);
};
const handleInputChange = (e) => {
setVal(e.target.value === '' ? '' : Number(e.target.value));
};
return (
<div style={{
padding: 40,
width: '50%'
}}>
<Slider
value={typeof val === 'number' ? val : 0}
onChange={handleSliderInput}
aria-labelledby="slider-with-input"
/>
<Input
value={val}
size="small"
onChange={handleInputChange}
inputProps={{
step: 5,
min: 0,
max: 50,
type: 'number',
'aria-labelledby': 'slider-with-input',
}}
/>
</div>
);
};
export default App;
输出
示例
在此示例中，我们在 Material UI 中设计了一个包含始终可见的标签的滑块。为了确保标签的显示，我们可以使用 valueLabelDisplay 属性。将其值设置为“on”。定义此属性后，用户选择值时，它将显示在滑块上方。
import React from "react";
import Slider from "@mui/material/Slider"
import Input from '@mui/material/Input';
const App = () => {
const [val, setVal] = React.useState(68);
const handleSliderInput = (e, newValue) => {
setVal(newValue);
};
const handleInputChange = (e) => {
setVal(e.target.value === '' ? '' : Number(e.target.value));
};
return (
<div style={{
padding: 40,
width: '50%'
}}>
<Slider
value={typeof val === 'number' ? val : 0}
onChange={handleSliderInput}
aria-labelledby="slider-with-input"
valueLabelDisplay="on"
color="secondary"
/>
<Input
value={val}
size="small"
onChange={handleInputChange}
inputProps={{
step: 5,
min: 0,
max: 50,
type: 'number',
'aria-labelledby': 'slider-with-input',
}}
/>
</div>
);
};
export default App;
输出
结论
总之，本文介绍了使用 React 在 Material UI 中创建带输入框的滑块的过程。为此，我们使用了 Material UI 提供的 Input 组件。本文概述了创建带输入框的滑块的分步说明。还提供了示例和相应的输出结果。
533 次浏览
