React MUI 滑块输入

Material-UI 是一个用户界面框架，提供预定义和可定制的 React 组件，用于更快速和简单的 Web 开发。Material-UI 组件基于谷歌的 Material Design。在本文中，让我们讨论 Material-UI 库中的 滑块 API 。

MUI 的 滑块 API 用于允许用户从一系列值中进行选择。

滑块 API 属性：

aria-label： 它表示滑块的标签。
aria-labelledby： 它表示包含滑块标签的元素的 id。
aria-valuetext： 它表示滑块当前值的字符串表示。
classes： 它表示用于覆盖默认样式的样式。
color： 它表示组件的颜色。
components： 它表示在滑块 API 中每个插槽内使用的组件。
componentsProps： 它表示在滑块中每个插槽组件使用的 props。
defaultValue： 它表示滑块的默认值。
- disabled: 它确定滑块是否被禁用。
- disableSwap: 它确定在拖动另一个滑块时，将鼠标指针移到一个滑块上是否会交换活动的滑块。
- getAriaLabel: 它表示一个回调函数，返回滑块的标签。
- getAriaValueText: 它表示一个回调函数，返回滑块的当前值。
- isRtl: 它确定主题上下文是否具有RTL方向。
- marks: 它确定标记是否根据step属性的值进行间隔。
- max: 它表示滑块允许的最大值。
- min: 它表示滑块允许的最小值。
- name: 它表示输入元素的name属性。
- onChange: 它表示在改变滑块值时触发的回调函数。
- onChangeCommitted: 它表示在触发mouseup事件时触发的回调函数。
- orientation: 它表示滑块的方向。
- scale: 它表示帮助改变滑块刻度的转换函数。
- size: 它表示滑块的大小。
- step: 它表示滑块的步长。
粒度（granularity）： 它表示滑块（slider）可以以多细的间隔来调整值。
sx： 此系统属性（system prop）用于定义系统重写（system overrides）和额外的CSS样式。
tabIndex： 它表示输入元素的tab索引值。
track： 它表示轨道（track）的展示。
value： 它表示滑块的值。
valueLabelDisplay： 它控制何时显示值标签（value label）。
valueLabelFormat： 它表示格式化函数，用于格式化滑块的值。

创建React应用程序并安装模块：

步骤1： 使用以下命令创建React应用程序：

npx create-react-app foldername

步骤2： 创建项目文件夹，即文件夹名称，然后使用以下命令进入该文件夹：

cd foldername

步骤3： 创建ReactJS应用后，使用以下命令安装所需模块：

npm install @mui/material

项目结构： 它将如下所示。

React MUI 滑块输入

示例1： 在这个示例中，我们会尝试创建一个简单的应用程序，使用Slider组件来展示两个不同尺寸的滑块。现在在App.js文件中写下以下代码。这里，App是我们的默认组件，我们在这里写了我们的代码：

文件名：App.js

import * as React from 'react'; 
import { Slider } from '@mui/material'; 
  
export default function BasicButtonGroup() { 
    return ( 
        <div> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI Slider API</strong> 
                <br /> 
                <br /> 
            </div> 
            <div 
                style={{ 
                    width: "300px", 
                    margin: "auto", 
                }} 
            > 
                <Slider 
                    size="small"
                    defaultValue={70} 
                    aria-label="Small"
                    valueLabelDisplay="auto"
                /> 
                <Slider defaultValue={50}  
                    aria-label="Default" 
                    valueLabelDisplay="auto" /> 
            </div> 
        </div> 
    ); 
}

运行应用步骤 ：从项目的根目录使用以下命令运行应用程序：

npm start

输出： 现在打开你的浏览器，然后访问 http://localhost:3000/，你将看到以下的输出：

React MUI 滑块输入

示例2： 下面的示例演示了两个不同的滑块，但值的变化是分散的。将您的App.js更改为以下内容。

import * as React from 'react'; 
import { Slider } from '@mui/material'; 
  
export default function BasicButtonGroup() { 
    return ( 
        <div> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI Slider API</strong> 
                <br /> 
                <br /> 
            </div> 
            <div 
                style={{ 
                    width: "300px", 
                    margin: "auto", 
                }} 
            > 
                <Slider 
                  aria-label="Temperature"
                  defaultValue={30} 
                  valueLabelDisplay="auto"
                  step={10} 
                  marks 
                  min={10} 
                  max={110} 
                /> 
                <Slider defaultValue={30} step={10}  
                    marks min={10} max={110} disabled /> 
            </div> 
        </div> 
    ); 
}