Componente deslizante React Rebass Forms

React Rebass es un framework front-end que fue diseñado teniendo en cuenta a React. En este artículo, sabremos cómo usar el componente deslizante en React Rebass. El Slider es un componente importante que se requiere en cada desarrollo. Entonces, para crear un componente Slider, podemos importar el componente Rebass Slider.

El componente Form Slider se usa para hacer un componente accesible y tematizable para elegir un valor numérico de un rango finito.

Sintaxis:

<Slider defaultValue={25} />

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 React Rebass y forme componentes en su directorio dado.

npm i rebass
npm i @rebass/forms

Estructura del proyecto: Tendrá el siguiente aspecto.

Folder Structure

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

App.js

import React from "react";
import { Text } from "rebass";
import { Label, Slider } from "@rebass/forms";
  
const gfg = () => {
    return (
        <div id="gfg">
            <Text fontSize={[3, 4, 5]} fontWeight="bold"
            color="green">
                Geeksforgeeks
            </Text>
            <Text fontSize={[1, 2, 3]} fontWeight="bold" 
            color="black">
                Rebass Slider Component
            </Text>
            <br />
            <Label>Slider</Label>
            <Slider id="gfg" name="gfg" width="30%" 
            defaultValue={25} />
        </div>
    );
};
  
export default gfg;

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

npm start

Producción:

Forms Slider Component

Referencia: https://rebassjs.org/forms/slider

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *