{"id":22419282,"url":"https://github.com/bert27/next-fixed-and-normal-range","last_synced_at":"2026-04-15T13:32:38.368Z","repository":{"id":266277644,"uuid":"897895410","full_name":"bert27/next-fixed-and-normal-range","owner":"bert27","description":"A dynamic range slider component built with Next.js.","archived":false,"fork":false,"pushed_at":"2024-12-10T10:44:26.000Z","size":125,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-04T10:29:25.947Z","etag":null,"topics":["nextjs","range-slider","responsive","ssr","styled-components","testing","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bert27.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-03T12:34:44.000Z","updated_at":"2024-12-17T00:37:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"378ec255-f985-44d6-b535-860ffde0823e","html_url":"https://github.com/bert27/next-fixed-and-normal-range","commit_stats":null,"previous_names":["bert27/next-fixed-and-normal-range"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bert27/next-fixed-and-normal-range","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fnext-fixed-and-normal-range","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fnext-fixed-and-normal-range/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fnext-fixed-and-normal-range/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fnext-fixed-and-normal-range/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bert27","download_url":"https://codeload.github.com/bert27/next-fixed-and-normal-range/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fnext-fixed-and-normal-range/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31842881,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T13:28:40.153Z","status":"ssl_error","status_checked_at":"2026-04-15T13:28:29.396Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","range-slider","responsive","ssr","styled-components","testing","typescript"],"created_at":"2024-12-05T16:14:50.594Z","updated_at":"2026-04-15T13:32:38.362Z","avatar_url":"https://github.com/bert27.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eNext Fixed and Normal Range\u003c/h1\u003e\r\n\r\n\u003cp\u003eThis project demonstrates a range slider component that supports two modes: fixed values and normal range. It uses \u003cstrong\u003eNext.js\u003c/strong\u003e, \u003cstrong\u003eTurbopack\u003c/strong\u003e, and \u003cstrong\u003eVitest\u003c/strong\u003e for development and testing.\u003c/p\u003e\r\n\r\n  \u003ch2\u003eOnline Demo\u003c/h2\u003e\r\n  \u003cp\u003eYou can try out the range slider for both modes:\u003c/p\u003e\r\n  \u003cul\u003e\r\n    \u003cli\u003e \u003ca href=\"https://range-slider-next.netlify.app/exercise1\"\u003eExercise 1 (Normal Range Slider)\u003c/a\u003e\u003c/li\u003e\r\n    \u003cli\u003e \u003ca href=\"https://range-slider-next.netlify.app/exercise2\"\u003eExercise 2 (Fixed Range Slider)\u003c/a\u003e\u003c/li\u003e\r\n  \u003c/ul\u003e\r\n  \r\n\u003ch2\u003eGetting Started\u003c/h2\u003e\r\n\r\n\u003ch3\u003eInstallation\u003c/h3\u003e\r\n\u003cp\u003eBefore running the application, make sure to install the project dependencies:\u003c/p\u003e\r\n\u003cpre\u003e\u003ccode\u003enpm install\u003c/code\u003e\u003c/pre\u003e\r\n\r\n\u003ch3\u003eDevelopment Server\u003c/h3\u003e\r\n\u003cp\u003eTo start the development server using Turbopack:\u003c/p\u003e\r\n\u003cpre\u003e\u003ccode\u003enpm run dev\u003c/code\u003e\u003c/pre\u003e\r\n\u003cp\u003eThe development server will be available at: \u003ca href=\"http://localhost:8080\"\u003ehttp://localhost:8080\u003c/a\u003e\u003c/p\u003e\r\n\r\n\u003ch3\u003eBuild\u003c/h3\u003e\r\n\u003cp\u003eTo build the project for production:\u003c/p\u003e\r\n\u003cpre\u003e\u003ccode\u003enpm run build\u003c/code\u003e\u003c/pre\u003e\r\n\r\n\u003ch3\u003eStart\u003c/h3\u003e\r\n\u003cp\u003eAfter building the project, you can run the production server:\u003c/p\u003e\r\n\u003cpre\u003e\u003ccode\u003enpm start\u003c/code\u003e\u003c/pre\u003e\r\n\u003cp\u003eThe production server will be available at: \u003ca href=\"http://localhost:8080\"\u003ehttp://localhost:8080\u003c/a\u003e\u003c/p\u003e\r\n\r\n\u003ch2\u003eTesting\u003c/h2\u003e\r\n\r\n\u003ch3\u003eRunning Tests\u003c/h3\u003e\r\n\u003cp\u003eTo run the tests using Vitest:\u003c/p\u003e\r\n\u003cpre\u003e\u003ccode\u003enpm run test\u003c/code\u003e\u003c/pre\u003e\r\n\r\n\u003ch3\u003eTest Coverage\u003c/h3\u003e\r\n\u003cp\u003eTo check the test coverage:\u003c/p\u003e\r\n\u003cpre\u003e\u003ccode\u003enpm run test:coverage\u003c/code\u003e\u003c/pre\u003e\r\n\r\n\u003ch3\u003eTest UI\u003c/h3\u003e\r\n\u003cp\u003eTo use the interactive test UI:\u003c/p\u003e\r\n\u003cpre\u003e\u003ccode\u003enpm run test:ui\u003c/code\u003e\u003c/pre\u003e\r\n\r\n\u003cp\u003eThe coverage command shows detailed statistics for your test files.\u003c/p\u003e\r\n\r\n\u003ch2\u003eProject Features\u003c/h2\u003e\r\n\u003cul\u003e\r\n  \u003cli\u003e\u003cstrong\u003eMode-based range slider\u003c/strong\u003e:\r\n    \u003cul\u003e\r\n      \u003cli\u003e\u003cstrong\u003eFixed Mode\u003c/strong\u003e: A slider with predefined values.\u003c/li\u003e\r\n      \u003cli\u003e\u003cstrong\u003eNormal Mode\u003c/strong\u003e: A slider with adjustable min, max, and step values.\u003c/li\u003e\r\n    \u003c/ul\u003e\r\n  \u003c/li\u003e\r\n  \u003cli\u003e\u003cstrong\u003eModern stack\u003c/strong\u003e: Built with \u003cstrong\u003eNext.js\u003c/strong\u003e and uses \u003cstrong\u003eTurbopack\u003c/strong\u003e for blazing-fast development.\u003c/li\u003e\r\n  \u003cli\u003e\u003cstrong\u003eComprehensive testing\u003c/strong\u003e: Leveraging \u003cstrong\u003eVitest\u003c/strong\u003e for unit testing and coverage reports.\u003c/li\u003e\r\n\u003c/ul\u003e\r\n\r\n\u003ch2\u003eRequirements\u003c/h2\u003e\r\n\u003cul\u003e\r\n  \u003cli\u003e\u003cstrong\u003eNode.js\u003c/strong\u003e 18+\u003c/li\u003e\r\n  \u003cli\u003e\u003cstrong\u003enpm\u003c/strong\u003e 8+\u003c/li\u003e\r\n\u003c/ul\u003e\r\n\r\n\u003cp\u003eFeel free to explore and extend the project as needed!\u003c/p\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbert27%2Fnext-fixed-and-normal-range","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbert27%2Fnext-fixed-and-normal-range","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbert27%2Fnext-fixed-and-normal-range/lists"}