¿Cómo agregar Slider en Next.js?

En este artículo, vamos a aprender cómo podemos agregar File Dropper en NextJs. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.

Enfoque: para agregar nuestro Control deslizante, vamos a usar el paquete de rango de reacción. El paquete de rango de reacción nos ayuda a integrar controles deslizantes en cualquier lugar de nuestra aplicación. Primero, instalaremos el paquete de rango de reacción y luego agregaremos un control deslizante en nuestra página de inicio.

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

npx create-next-app gfg

Instale el paquete requerido: ahora instalaremos el paquete de rango de reacción usando el siguiente comando:

npm i react-range

Estructura del proyecto: Se verá así.

Agregar el control deslizante: después de instalar el paquete de rango de reacción, podemos agregar fácilmente el control deslizante en nuestra aplicación. Para este ejemplo, vamos a agregar un control deslizante a nuestra página de inicio.

Agregue el siguiente contenido en el archivo index.js :

import * as React from 'react';
import { Range } from 'react-range';
  
export default class Slider extends React.Component {
  state = { values: [50] };
  render() {
    return (
      <>
      <h3>GeeksforGeeks- Slider</h3>
      <Range
        step={0.1}
        min={0}
        max={100}
        values={this.state.values}
        onChange={(values) => this.setState({ values })}
        renderTrack={({ props, children }) => (
          <div
            {...props}
            style={{
              ...props.style,
              height: '6px',
              width: '100%',
              backgroundColor: '#ccc'
            }}
          >
            {children}
          </div>
        )}
        renderThumb={({ props }) => (
          <div
            {...props}
            style={{
              ...props.style,
              height: '42px',
              width: '42px',
              backgroundColor: '#999'
            }}
          />
        )}
      />
      </>
    );
  }
}

Explicación: en el ejemplo anterior primero, estamos importando nuestro componente Range del paquete instalado. Después de eso, estamos creando un estado para almacenar el valor inicial. Luego, estamos agregando nuestro componente Range. En el componente de rango, estamos configurando el valor mínimo, el valor máximo, la función onChange y el valor actual.

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

npm run dev

Producción: