在 React 中使用 Material UI 的范围滑块

Material-UI是一个基于 React 的模块。 Material-UI 库为用户提供了最高效、最有效和用户友好的界面。要使用 Range 滑块，我们需要安装 Material-UI。另外，自定义样式可以参考 Material-UI 中 SVG 图标组件的 API。

先决条件：

• ReactJS 的基础知识
• 已经创建了 ReactJS 应用

下面按顺序描述了所有步骤，以便为图标添加颜色。

安装：

• 步骤 1：在继续之前，首先我们必须安装 Material-UI 模块，通过在您的项目目录中运行以下命令，在您的 src 文件夹中的终端的帮助下，或者您也可以在 Visual Studio Code 的终端中运行此命令你的项目文件夹。

npm install @material-ui/core  

• 第 2 步：安装模块后，现在打开项目目录中 src 文件夹下的 App.js 文件，然后删除其中的代码。
• 第 3 步：现在从 react 和 Material-UI 模块中导入 React、useState（滑块的初始状态）和 Slider。
• 第 4 步：在您的 app.js 文件中，添加此代码片段以从 React 导入 React、useState（用于滑块的初始状态）和从 Material-UI 模块导入 Slider。

import React, { useState } from "react";
import { Slider } from "@material-ui/core";

项目的文件结构将如下所示：

下面是一个示例程序来说明滑块的使用：

示例：城市当前温度的范围滑块。

文件名-src/App.js：

Javascript

//We use useState for the initial set values
import React, { useState } from "react";
import "./App.css";
//we import slider from material ui
import { Slider } from "@material-ui/core";
  
function App() {
  //Providing different values with labels
  const gfg = [
    {
      value: 0,
      label: "0°C",
    },
    {
      value: 25,
      label: "25°C",
    },
    {
      value: 50,
      label: "50°C",
    },
    {
      value: 100,
      label: "100°C",
    },
  ];
  
  const [val, setVal] = useState([0, 40]);
  const updateRange = (e, data) => {
    setVal(data);
  };
  return (
    

      
 What is the current temperature in your City ? 
      

         Temperature : {" "}
        
      
{" "}
    
  );
}
export default App;

文件名-src/App.css：

CSS

body {
  margin: 0px;
}
.App {
  font-family: sans-serif;
  color: green;
  font-size: 16px;
}
  
span {
  color: red;
  font-size: 18px;
  font-weight: 13px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
    
}

输出：因此使用上述步骤，我们可以使用 Material-UI Slider 在 ReactJS 中制作范围滑块。