Componente de rango ReactJS MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar Range Component en ReactJS MDBootstrap.
El componente Rango permite a los usuarios realizar selecciones a partir de un rango de valores.

Propiedades:

• className: Se utiliza para agregar clases personalizadas.
• disabled: Se utiliza para deshabilitar el componente.
• id: Se utiliza para definir un id para el componente.
• etiqueta: Se utiliza para definir el texto de la etiqueta para el componente.
• min: Se utiliza para establecer el valor mínimo permitido.
• max: Se utiliza para establecer el valor máximo permitido.
• paso: Se utiliza para establecer el intervalo de pasos.

Sintaxis:

<MDBRange value={number}/>

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

cd foldername

Paso 3 : Instale ReactJS MDBootstrap en su directorio dado.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Paso 4: Importe el elemento que se utilizará en el proyecto.

import { MDBRange } from 'mdb-react-ui-kit'

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente de rango.

import React, { useState } from 'react';
import { MDBRange } from 'mdb-react-ui-kit';
  
  
export default function App() {
    const [id, setRange] = useState(40);
  
    const geeks = (e) => {
        setRange(e.target.value);
    }
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Range component</h4>
  
            <MDBRange
                value={id}
                id='customRange'
                onChange={geeks}
            />
        </div>
    );
}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad disabled en un componente Range.

import React, { useState } from 'react';
import { MDBRange } from 'mdb-react-ui-kit';
  
  
export default function App() {
    const [id, setRange] = useState(40);
  
    const geeks = (e) => {
        setRange(e.target.value);
    }
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Range component</h4>
  
            <MDBRange
                value={id}
                disabled
                id='customRange'
                onChange={geeks}
            />
        </div>
    );
}

Producción:

Ejemplo 3: En este ejemplo, sabremos cómo usar la propiedad min, max y steps en un componente Switch.

import React, { useState } from 'react';
import { MDBRange } from 'mdb-react-ui-kit';
  
  
export default function App() {
    const [id, setRange] = useState(20);
  
    const geeks = (e) => {
        setRange(e.target.value);
    }
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Range component</h4>
  
            <MDBRange
                min='10'
                max='50'
                step='5'
                value={id}
                id='customRange'
                onChange={geeks}
            />
        </div>
    );
}

Producción:

Referencia: https://mdbootstrap.com/docs/b5/react/forms/range/