feat(ui): Add Slider component

[kylengn]

Summary by CodeRabbit

New Features

• Added a new Slider component with support for single-thumb and range modes, vertical and horizontal orientations, both controlled and uncontrolled state management, disabled state, and customizable styling options.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-ui	Ready	Preview, Comment	Feb 5, 2026 4:52am

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

Walkthrough

This pull request introduces a new Slider component to the @shipfox/react-ui package. It includes the component implementation using Radix UI primitives, Storybook documentation with multiple usage examples, public exports, and a version bump changeset entry.

Changes

Cohort / File(s)	Summary
Changeset Documentation .changeset/chilly-ears-fly.md	Version bump entry documenting the addition of the new Slider component to @shipfox/react-ui.
Slider Component Implementation libs/react/ui/src/components/slider/slider.tsx	New Slider component using Radix UI primitives with support for single-thumb and range sliders, vertical/horizontal orientation, customizable styling via className props, and controlled/uncontrolled value management.
Component Exports libs/react/ui/src/components/slider/index.ts, libs/react/ui/src/components/index.ts	Added barrel exports to publicly expose the Slider component and its types from the component library.
Storybook Stories libs/react/ui/src/components/slider/slider.stories.tsx	Comprehensive Storybook configuration with six stories demonstrating default, range, controlled, vertical, and disabled slider variants with usage patterns and styling examples.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• EnzalRad
• dvxam
• noe-charmet

Poem

🐰 A slider so smooth, with thumbs that do glide,
Radix-powered movement from left to the right,
Stories tell tales of each variant's dance,
Range or solo, vertical stance,
New UI magic takes flight! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(ui): Add Slider component' directly and accurately describes the main change - introducing a new Slider component to the UI library.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/slider

---

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.}

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	20 changed, 6 added	Feb 5, 2026, 4:54 AM

[Copilot]

Pull request overview

Adds a new Slider component to the React UI library (built on @radix-ui/react-slider), along with Storybook documentation and package exports/changeset for release.

Changes:

• Introduce Slider component wrapper with styling hooks for track/range/thumb.
• Add Storybook stories demonstrating default, range, controlled, vertical, and disabled variants.
• Export the new component from the component barrels and add a changeset for a minor release.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
libs/react/ui/src/components/slider/slider.tsx	Implements Radix-based Slider wrapper and styling defaults.
libs/react/ui/src/components/slider/slider.stories.tsx	Adds Storybook coverage for common usage patterns.
libs/react/ui/src/components/slider/index.ts	Barrel export for the slider module.
libs/react/ui/src/components/index.ts	Re-exports Slider from the central components index.
.changeset/chilly-ears-fly.md	Declares a minor bump for @shipfox/react-ui to release Slider.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@libs/react/ui/src/components/slider/slider.tsx`:
- Around line 54-58: The thumbs map in SliderPrimitive.Thumb uses the raw value
from _values as the React key which can produce duplicate keys (e.g., [50,50])
and break reconciliation; change the key to a stable unique identifier per thumb
such as combining the index with the value or using the array index (e.g.,
`${index}-${val}`) when mapping _values in the Slider component where
SliderPrimitive.Thumb is created, keeping className={cn(thumbDefaults,
thumbClassName)} intact.