¿Cómo agregar control deslizante de entrada en React.js?

En este artículo, vamos a aprender cómo podemos agregar input sider en ReactJs. React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

Enfoque: para agregar nuestra entrada de control deslizante, vamos a utilizar el paquete de control deslizante de entrada de reacción. El paquete react-input-slider nos ayuda a integrar la entrada del control deslizante en nuestra aplicación. Primero, instalaremos el paquete react-input-slider y luego agregaremos una entrada de control deslizante en nuestra página de inicio.

Crear aplicación ReactJs: puede crear un nuevo proyecto ReactJs usando el siguiente comando:

npx create-react-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-input-slider usando el siguiente comando:

npm i react-input-slider

Estructura del proyecto: Se verá así.

Agregar la entrada del control deslizante: después de instalar el paquete, podemos agregar fácilmente una entrada del control deslizante en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar una entrada deslizante a nuestra página de inicio.

Agregue el siguiente contenido en el archivo App.js :

import React, { useState } from 'react';
import Slider from 'react-input-slider';
  
export default function GfgInput() {
  const [state, setState] = useState({ x: 15, y: 15 });
  return (
    <div>
      <h2>GeeksforGeeks ReactJs - Slider Input</h2>
      <div>
        ({state.x}, {state.y})
        <Slider axis="xy" x={state.x} y={state.y} onChange={setState} />
        <Slider
          axis="x"
          x={state.x}
          onChange={({ x }) => setState(state => ({ ...state, x }))}
        />
        <Slider axis="y" y={state.y} onChange=
            {({ y }) => setState(state => ({ ...state, y }))} />
      </div>
    </div>
  );
}

Explicación: en el ejemplo anterior primero, estamos importando el componente Slider y el enlace useState de reaccionar. Luego estamos usando el enlace useState para almacenar el valor de la entrada. Después de eso, estamos agregando nuestra entrada de control deslizante usando el paquete instalado.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm start

Producción: