Control deslizante de rango usando Material UI en React

Material-UI es un módulo basado en React. La biblioteca Material-UI proporciona a los usuarios la interfaz más eficiente, efectiva y fácil de usar. Para usar el control deslizante Rango, necesitamos instalar Material-UI. Además, para el estilo personalizado, siempre puede consultar la API del componente de icono SVG en Material-UI.

requisitos previos:

• Fundamentos de ReactJS
• Aplicación ReactJS ya creada

A continuación, se describen todos los pasos en orden para agregar colores a los íconos.

Instalación:

• Paso 1: antes de continuar, primero debemos instalar el módulo Material-UI, ejecutando el siguiente comando en el directorio de su proyecto, con la ayuda de la terminal en su carpeta src o también puede ejecutar este comando en la terminal de Visual Studio Code en carpeta de su proyecto.

npm install @material-ui/core  

• Paso 2: después de instalar el módulo, ahora abra su archivo App.js que está presente dentro del directorio de su proyecto, en la carpeta src, y elimine el código presente en su interior.
• Paso 3: ahora importe React, useState (para el estado inicial del control deslizante) desde React y Slider desde el módulo Material-UI.
• Paso 4: en su archivo app.js, agregue este fragmento de código para importar React, useState (para el estado inicial del control deslizante) desde React y Slider desde el módulo Material-UI.

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

La estructura de archivos del proyecto se verá así:

A continuación se muestra un programa de muestra para ilustrar el uso del control deslizante:

Ejemplo: control deslizante de rango para la temperatura actual en la ciudad.

Nombre de archivo- src/App.js:

//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 (
    <div className="App">
      <h1> What is the current temperature in your City ? </h1>
      <div style={{ width: 500, margin: 60 }}>
        <span> Temperature : </span>{" "}
        <Slider value={val} onChange={updateRange} marks={gfg} />
      </div>{" "}
    </div>
  );
}
export default App;

Nombre de archivo- src/App.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;
    
}

Salida: por lo tanto, usando los pasos mencionados anteriormente, podemos usar el control deslizante Material-UI para hacer un control deslizante de rango en ReactJS .