如何在 Next.js 中添加滑块？

在本文中，我们将学习如何在 NextJs 中添加 File Dropper。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。

方法：要添加我们的 Slider，我们将使用 react-range 包。 react-range 包帮助我们在应用程序的任何地方集成滑块。所以首先，我们将安装 react-range 包，然后我们将在我们的主页上添加一个滑块。

创建 NextJS 应用程序：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

安装所需的包：现在我们将使用以下命令安装 react-range 包：

npm i react-range

项目结构：它看起来像这样。

添加滑块：安装 react-range 包后，我们可以轻松地在我们的应用程序中添加滑块。对于这个例子，我们将在我们的主页上添加一个滑块。

在index.js文件中添加以下内容：

Javascript

import * as React from 'react';
import { Range } from 'react-range';
  
export default class Slider extends React.Component {
  state = { values: [50] };
  render() {
    return (
      <>
      GeeksforGeeks- Slider
       this.setState({ values })}
        renderTrack={({ props, children }) => (
          
            {children}
          
        )}
        renderThumb={({ props }) => (
          
        )}
      />
      
    );
  }
}

说明：在上面的例子中，我们首先从已安装的包中导入 Range 组件。之后，我们正在创建一个状态来存储起始值。然后，我们添加 Range 组件。在范围组件中，我们设置最小值、最大值、onChange函数和当前值。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm run dev

如何在 Next.js 中添加滑块？

Javascript

GeeksforGeeks- Slider

输出：