bert27 / next-fixed-and-normal-range

A dynamic range slider component built with Next.js.

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!