https://github.com/bert27/next-fixed-and-normal-range

A dynamic range slider component built with Next.js.
https://github.com/bert27/next-fixed-and-normal-range

nextjs range-slider responsive ssr styled-components testing typescript

Last synced: 2 months ago
JSON representation

A dynamic range slider component built with Next.js.

• Host: GitHub
• URL: https://github.com/bert27/next-fixed-and-normal-range
• Owner: bert27
• License: mit
• Created: 2024-12-03T12:34:44.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-10T10:44:26.000Z (over 1 year ago)
• Last Synced: 2025-10-04T10:29:25.947Z (9 months ago)
• Topics: nextjs, range-slider, responsive, ssr, styled-components, testing, typescript
• Language: TypeScript
• Homepage:
• Size: 122 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
Next Fixed and Normal Range


This project demonstrates a range slider component that supports two modes: fixed values and normal range. It uses Next.js, Turbopack, and Vitest for development and testing.


  
Online Demo

  
You can try out the range slider for both modes:

  


    
 Exercise 1 (Normal Range Slider)



    
 Exercise 2 (Fixed Range Slider)



  

  

Getting Started


Installation

Before running the application, make sure to install the project dependencies:

npm install


Development Server

To start the development server using Turbopack:

npm run dev

The development server will be available at: http://localhost:8080


Build

To build the project for production:

npm run build


Start

After building the project, you can run the production server:

npm start

The production server will be available at: http://localhost:8080


Testing


Running Tests

To run the tests using Vitest:

npm run test


Test Coverage

To check the test coverage:

npm run test:coverage


Test UI

To use the interactive test UI:

npm run test:ui


The coverage command shows detailed statistics for your test files.


Project Features



  


Mode-based range slider:

    


      


Fixed Mode: A slider with predefined values.

      


Normal Mode: A slider with adjustable min, max, and step values.

    

  

  


Modern stack: Built with Next.js and uses Turbopack for blazing-fast development.

  


Comprehensive testing: Leveraging Vitest for unit testing and coverage reports.



Requirements



  


Node.js 18+

  


npm 8+



Feel free to explore and extend the project as needed!