Componente deslizante de diseño de hormigas de la interfaz de usuario de ReactJS

. El componente deslizante se usa cuando podemos usar el siguiente enfoque en ReactJS para usar el componente deslizante Ant Design.

Métodos deslizantes:

• blur(): este método se utiliza para eliminar el foco del elemento.
• focus(): este método se utiliza para enfocar el elemento.

Accesorios deslizantes:

• autoFocus: Se utiliza para obtener el enfoque cuando se monta el componente.
• defaultValue: se utiliza como valor predeterminado del control deslizante.
• disabled: se utiliza para desactivar el control deslizante.
• puntos: se utiliza para indicar si el pulgar puede arrastrarse solo sobre la marca o no.
• getTooltipPopupContainer: se utiliza para el contenedor DOM del Tooltip.
• incluido: Se utiliza para hacer un efecto cuando las marcas no son nulas.
• marcas: se utiliza para definir la marca de verificación del control deslizante.
• max: se utiliza para indicar el valor máximo que puede deslizar el control deslizante.
• min: se utiliza para indicar el valor mínimo que puede deslizar el control deslizante.
• Rango: se utiliza para el modo de pulgar doble.
• reverse: Se utiliza para invertir el componente.
• paso: se utiliza para indicar la granularidad con la que el control deslizante puede recorrer los valores.
• tipFormatter: se utiliza para el control deslizante para que pase su valor a tipFormatter.
• tooltipPlacement: se utiliza para establecer la posición de visualización de información sobre herramientas.
• tooltipVisible: Se utiliza para indicar si mostrar Tooltip o no.
• valor: se utiliza para indicar el valor del control deslizante.
• vertical: Se utiliza para indicar si colocar el deslizador en vertical o no.
• onAfterChange: es una función de devolución de llamada que se activa cuando se activa el evento onmouseup .
• onChange: es una función de devolución de llamada que se activa cuando el usuario cambia el valor del control deslizante.

Accesorios de rango:

• draggableTrack: Se utiliza para indicar si la pista de rango se puede arrastrar o no.

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 , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install antd

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React, { useState } from 'react'
import "antd/dist/antd.css";
import { Slider } from 'antd';
  
export default function App() {
  
  // State to hold our current value
  const [currentValue, setCurrentValue] = useState(0)
  
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Slider Component</h4>
      <Slider defaultValue={0} disabled={false} max={100} onChange={(value)=> {
        setCurrentValue(value)
      }}/>
      Slider Value: {currentValue}
    </div>
  );
}

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

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://ant.design/components/slider/