Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add Slider in Next.js ?

  • Last Updated : 15 Nov, 2021

In this article, we are going to learn how we can add File Dropper in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.

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

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

npx create-next-app gfg

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

npm i react-range

Project Structure: It will look like this.

Adding the Slider: After installing the react-range package we can easily add Slider in our app. For this example, we are going to add a slider to our homepage.

Add the below content in the index.js file:

Javascript




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'
            }}
          />
        )}
      />
      </>
    );
  }
}

Explanation: In the above example first, we are importing our Range component from the installed package. After that, we are creating a state to store the starting value. Then, we are adding our Range component. In the range component, we are setting the minimum value, maximum value, onChange function, and current Value.

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

npm run dev

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!