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>neveropen- 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:
