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:
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:
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 ( <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:
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 .
Publicación traducida automáticamente
Artículo escrito por ritikumariupadhyay24 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA