Replace ng5-slider with @angular-slider/ngx-slider

[nvphungdev]

Summary

• replace deprecated ng5-slider dependency with @angular-slider/ngx-slider@15.0.1 for Angular 15 compatibility
• update slider modules, Options imports, template tags, and global slider styles
• remove obsolete ng5-slider/rxjs-compat lockfile entries

Verification

• npm install --legacy-peer-deps
• npm run build

Closes #33

Summary by CodeRabbit

Release Notes

• Chores
  • Updated the slider library used for all range refinement features (age, date, and value ranges) to a newer, actively maintained version. This ensures improved performance, stability, and long-term compatibility while maintaining all existing functionality.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 40daa968-f885-46c0-9849-6745c0527a40

📥 Commits

Reviewing files that changed from the base of the PR and between 39a33ff and f5d4d93.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (9)

• package.json
• src/app/components/age-refinement-list/age-refinement-list.component.html
• src/app/components/age-refinement-list/age-refinement-list.component.ts
• src/app/components/age-refinement-list/age-refinement-list.module.ts
• src/app/components/date-range-refinement-list/date-range-refinement-list.component.ts
• src/app/components/range-refinement-list/range-refinement-list.html
• src/app/components/range-refinement-list/range-refinement-list.module.ts
• src/app/components/range-refinement-list/range-refinement-list.ts
• src/global.scss

---

📝 Walkthrough

Walkthrough

This PR migrates the codebase from the abandoned ng5-slider library to @angular-slider/ngx-slider, which is the maintained fork with an identical API. The dependency is updated, type imports and module declarations are switched across three components, slider templates are retagged, and global styles are updated to target the new library's CSS classes.

Changes

Slider Library Migration

Layer / File(s)	Summary
Dependency replacement package.json	Replace ng5-slider (^1.2.6) with @angular-slider/ngx-slider (15.0.1) in dependencies.
Age refinement component migration src/app/components/age-refinement-list/age-refinement-list.component.ts, age-refinement-list.module.ts, age-refinement-list.component.html	Update Options type import from ng5-slider, replace Ng5SliderModule with NgxSliderModule in module imports, and switch slider tag from ng5-slider to ngx-slider in template while preserving all bindings and event handlers.
Range refinement component migration src/app/components/range-refinement-list/range-refinement-list.ts, range-refinement-list.module.ts, range-refinement-list.html	Update Options type import from ng5-slider, replace Ng5SliderModule with NgxSliderModule in module imports, and switch slider tag from ng5-slider to ngx-slider in template while preserving all bindings and event handlers.
Date range refinement type import src/app/components/date-range-refinement-list/date-range-refinement-list.component.ts	Update Options type import to use @angular-slider/ngx-slider.
Global slider styling src/global.scss	Update SCSS selectors from .ng5-slider to .ngx-slider and rename nested selectors (.ng5-slider-pointer → .ngx-slider-pointer, .ng5-slider-selection → .ngx-slider-selection).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A slider once aged, now refreshed anew,
From ng5 to ngx, the library flew,
Templates and styles dance in harmony,
Range controls glide so smoothly!
The fork is alive, the API stays true. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: replacing ng5-slider with @angular-slider/ngx-slider, which matches the core objective of the entire changeset.
Linked Issues check	✅ Passed	All coding requirements from issue #33 are met: ng5-slider removed from package.json, @angular-slider/ngx-slider@15.0.1 added, all Ng5SliderModule imports updated to NgxSliderModule, template tags updated from to , and global styles updated for ngx-slider classes.
Out of Scope Changes check	✅ Passed	All changes are directly related to the migration from ng5-slider to @angular-slider/ngx-slider; no unrelated modifications to other features or components were introduced.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}