How to add Slider in Next.js ? Last Updated : 22 Jul, 2024 Comments Improve Suggest changes Like Article Like Report Adding a slider in Next.js involves integrating a slider component, like react-range, managing its state using React hooks and applying styles for customization, enhancing user interaction and input precision in your application.ApproachTo 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 ApplicationYou can create a new NextJs project using the below command:npx create-next-app gfgInstall the required package: Now we will install the react-range package using the below command:npm i react-rangeProject Structure: It will look like this.The updated dependencies in the package.josn are:"dependencies": { "next": "14.2.4", "react": "^18", "react-dom": "^18", "react-range": "^1.9.2"}Example: 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. JavaScript // Filename - index.js 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 devOutput: Comment More infoAdvertise with us Next Article How to add Slider in Next.js ? I imranalam21510 Follow Improve Article Tags : JavaScript Web Technologies ReactJS Next.js Similar Reads How to add Input Slider in React JS ? We will learn how to add an input slider in React JS. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It was introduced by Facebook and a community of individual developers and companies. Prerequisites:Node JS or NPMReact JSReact useStateAp 2 min read How to Add Stylesheet in Next.js ? In Next.js, adding a stylesheet enhances your app's styling capabilities. Import CSS files directly in your components or pages using ES6 import syntax. Next.js optimizes and includes these styles in the build process, ensuring efficient and modular CSS management.In this post, we are going to learn 4 min read How to add Text Reveals in Next.js? In this article, we are going to learn how we can add Text reveals 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 conditi 2 min read How to import SASS in Next.js ? Sass is the short form of Syntactically Awesome Style Sheet. It is an upgrade to Cascading Style Sheets (CSS). Sass is a CSS pre-processor. It is fully compatible with every version of CSS. Importing SASS in Next.js allows you to use SCSS for styling your application. This integration enables advanc 2 min read How to add Image Carousel in Next.js ? In this article, we are going to learn how we can add an Image Carousel 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.ApproachTo create image carousel in next.js we are going to use a react-re 2 min read How to Hide and show slide arrows in slick slider? In this post, we will create a slick slider and later on show you how to show/hide the buttons of the slick slider. For creating a slick slider just declare many elements with the same class name. Example: In this example, we will create a slick slider using Javascript. html <!DOCTYPE html> 3 min read How to Design Image Slider using jQuery ? A slideshow container that cycles through a list of images on a web page. The following article will guide you to implement an image slider using HTML, CSS, and jQuery. The jQuery image slider contains images that run them using the previous and next icons. Previous and Next arrows are used to trave 5 min read How to add Draggable Components in Next.js ? In this article, we are going to learn how we can add Draggable Components 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 2 min read How To Build Testimonial Slider with Tailwind CSS and Next.js? A testimonial slider is a dynamic component often used on websites to showcase customer feedback or reviews. It allows users to scroll through testimonials, typically featuring the customer's name, role, a quote about their experience, and sometimes an image. In this article, we'll build a testimoni 5 min read Foundation CSS Slider Two Handles Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework 2 min read Like