Skip to content
Related Articles

Related Articles

How to add Input Slider in React.js ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 28 Dec, 2021

In this article, we are going to learn how we can add input sider in ReactJs. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.

Approach: To add our slider input we are going to use the react-input-slider package. The react-input-slider package helps us to integrate the slider input in our app. So first, we will install the react-input-slider package and then we will add a slider input on our homepage.

Create ReactJs Application: You can create a new ReactJs project using the below command:

npx create-react-app gfg

Install the required package: Now we will install the react-input-slider package using the below command:

npm i react-input-slider

Project Structure: It will look like this.

Adding the Slider Input: After installing the package we can easily add a slider input on any page in our app. For this example, we are going to add a slider input to our homepage.

Add the below content in the App.js file:

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 (
    <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>
  );
}

Explanation: In the above example first, we are importing the Slider component and useState hook from react. Then we are using the useState hook to store the value of the input. After that, we are adding our slider input using the installed package.

Steps to run the application: Run the below command in the terminal to run the app.

npm start

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!