如何在 React.js 中添加输入滑块？

在本文中，我们将学习如何在 ReactJs 中添加输入边。 React 是一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。

方法：要添加我们的滑块输入，我们将使用 react-input-slider 包。 react-input-slider 包帮助我们将滑块输入集成到我们的应用程序中。所以首先，我们将安装 react-input-slider 包，然后我们将在我们的主页上添加一个滑块输入。

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

npx create-react-app gfg

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

npm i react-input-slider

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

添加滑块输入：安装软件包后，我们可以轻松地在应用程序的任何页面上添加滑块输入。对于这个例子，我们将在我们的主页上添加一个滑块输入。

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

Javascript

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

说明：在上面的例子中，我们首先从 react 中导入 Slider 组件和 useState 钩子。然后我们使用 useState 挂钩来存储输入的值。之后，我们使用已安装的包添加我们的滑块输入。

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

npm start

如何在 React.js 中添加输入滑块？

Javascript

GeeksforGeeks ReactJs - Slider Input

输出：