feat(slider): add getTooltipValue prop for custom tooltip value

[ararTP]

Updated the time formatting examples for the getTooltipValue prop in both Storybook (slider.stories.tsx) and the component documentation (README.md).

This change addresses your feedback to showcase a more practical and detailed time formatting scenario. The updated examples now demonstrate:

• Input slider value representing time in milliseconds.
• Output tooltip content as a formatted string ss:mm:hh (seconds:minutes:hours).
• Logic includes padding for single-digit seconds, minutes, or hours to ensure consistent two-digit display (e.g., "05:01:01").

Closes # #3465 (comment)

Closes #

📝 Description

This PR enhances the Slider component by introducing two new props, getTooltipValue and tooltipValueFormatOptions, to provide developers with significantly more control over the content displayed in slider tooltips. These changes enable dynamic and custom-formatted tooltip labels.

⛳️ Current behavior (updates)

Previously, the content of slider tooltips was primarily tied to the slider's raw value, with limited options for customization beyond the default formatting provided by the formatOptions prop (which also affects the main slider label). This made it difficult to display custom strings, complex numeric formats (like specific time representations), or different information per thumb in multi-thumb sliders directly in the tooltip.

🚀 New behavior

This PR introduces the following enhancements:

1. getTooltipValue?: (value: SliderValue, index?: number) => string | number:

   • Developers can now provide this function to dynamically generate the tooltip content.
   • The function receives the slider's current value (which can be a number for single-thumb sliders or an array of numbers for multi-thumb sliders) and an optional index (for multi-thumb sliders).
   • It can return either a string for direct display or a number.

2. tooltipValueFormatOptions?: Intl.NumberFormatOptions:

   • If getTooltipValue returns a number, these options (standard Intl.NumberFormatOptions) are used to format that number. This allows for locale-aware formatting of percentages, currencies, decimals, etc., specifically for the tooltip.
   • If not provided, and getTooltipValue returns a number, the tooltip will try to use the slider's main formatOptions as a fallback.

3. Tooltip Content Precedence:

   • The order of precedence for tooltip content is now:
     1. tooltipProps.content (if provided, it overrides everything else)
     2. The value returned by getTooltipValue
     3. Default formatted value (using formatOptions)

4. Updated Time Formatting Examples:

   • The Storybook stories and README.md documentation now include updated examples for time formatting.
   • These examples demonstrate how to use getTooltipValue to convert a slider value (representing time in milliseconds) into a human-readable string formatted as hh:mm:ss (e.g., "05:01:01").

In summary, developers can now:

• Display completely custom strings in tooltips.
• Show dynamically calculated numeric values.
• Apply specific formatting (currency, percentage, units, time) to numbers shown in tooltips, independently of the main slider label.
• Customize tooltip content per thumb in multi-thumb sliders.

💣 Is this a breaking change (Yes/No):

No

This is an additive feature and does not change any existing APIs or behaviors in a breaking way. Current Slider implementations will continue to function as before.

📝 Additional Information

• Unit Tests: Comprehensive unit tests have been added to cover various scenarios for getTooltipValue and tooltipValueFormatOptions, including string/number return types, multi-thumb usage, formatting options, and precedence rules.
• Storybook: New stories have been added to slider.stories.tsx to visually demonstrate the new tooltip customization features, including the updated ss:mm:hh time formatting example.
• Documentation: The README.md for the Slider component has been updated to include detailed documentation for the new props and usage examples, including the time formatting.

Summary by CodeRabbit

• New Features

  • Added support for customizing slider tooltip content using a new getTooltipValue prop, allowing tooltips to display formatted or dynamic values.
  • Introduced new slider examples and stories demonstrating custom tooltip formats, including time and multi-thumb price ranges.
  • Enhanced slider accessibility with improved ARIA attributes for tooltips and thumb elements.
  • Added a new slider component example showcasing a custom tooltip that formats time in hh:mm:ss.

• Documentation

  • Updated documentation and README to describe the new getTooltipValue prop, its usage, and precedence rules.
  • Added usage examples for custom tooltip formatting in both docs and README.
  • Expanded API tables to include getTooltipValue prop details.
  • Added a new "Custom Tooltip Content" section to the slider documentation explaining getTooltipValue behavior.

• Tests

  • Added test cases to verify custom tooltip content, precedence over static content, and correct formatting behavior.

[changeset-bot]

🦋 Changeset detected

Latest commit: d3f5d08

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@heroui/slider	Patch
@heroui/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

@andartadev1 is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (5)

• main
• canary
• fix/.*
• chore/.*
• feat/.*

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.

Walkthrough

A new customizable tooltip feature for the Slider component was introduced. This includes a getTooltipValue prop that allows users to define custom formatting for tooltip content. Documentation, usage examples, tests, and storybook stories were added to demonstrate and verify this functionality. No breaking changes or removals were made.

Changes

File(s)	Change Summary
apps/docs/content/components/slider/custom-tooltip.raw.jsx, custom-tooltip.raw.tsx	Added new React components rendering a Slider with a custom tooltip formatting milliseconds as HH:MM:SS.
apps/docs/content/components/slider/custom-tooltip.ts	Introduced module exporting the raw custom tooltip component source for both JS and TS versions.
apps/docs/content/components/slider/index.ts	Imported and exported the new customTooltip component in the sliderContent object.
apps/docs/content/docs/components/slider.mdx	Enhanced documentation: added "Custom Tooltip Content" section, API table entries, and function explanations for getTooltipValue.
packages/components/slider/README.md	Documented new getTooltipValue and tooltipValueFormatOptions props with usage examples.
packages/components/slider/tests/slider.test.tsx	Added tests for getTooltipValue prop, its precedence over static tooltip content, return types, and formatting behavior.
packages/components/slider/src/use-slider-thumb.ts	Added getTooltipValue prop to thumb hook, updated tooltip logic to prioritize static content, added ARIA attributes, and default labels.
packages/components/slider/src/use-slider.ts	Added getTooltipValue prop to Slider props interface and passed it to thumb props for custom tooltip rendering.
packages/components/slider/stories/slider.stories.tsx	Added two stories: one for time formatting in tooltips, another for multi-thumb tooltips with custom labeling.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Slider
  participant Tooltip

  User->>Slider: Interacts (drag/focus thumb)
  Slider->>Slider: Calls getTooltipValue(value, index)
  Slider->>Tooltip: Passes formatted value from getTooltipValue
  Tooltip-->>User: Displays custom tooltip content

Loading

Suggested reviewers

• wingkwong

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 3

🔭 Outside diff range comments (1)

packages/components/slider/src/use-slider.ts (1)

370-384: 🛠️ Refactor suggestion

Prop naming mismatch in getThumbProps

tooltipValueFormatOptions is passed down as formatOptions, which is semantically misleading – a reader would assume it carries label formatting.

Recommend renaming the prop in SliderThumbProps (breaking) or passing as tooltipValueFormatOptions to keep intent clear. Example:

-  formatOptions: tooltipValueFormatOptions,
+  tooltipValueFormatOptions,

Requires adjusting use-slider-thumb.ts.

🧹 Nitpick comments (6)

apps/docs/content/components/slider/index.ts (1)

27-42: Keep import/export lists alphabetically sorted for easier maintenance

customTooltip is appended after customStyles in both the import block and the sliderContent object, breaking the (almost) alphabetical ordering followed so far.
Sticking to a consistent order avoids merge-conflicts and speeds up scanning.

-import customStyles from "./custom-styles";
-import customTooltip from "./custom-tooltip";
+import customStyles  from "./custom-styles";
+import customTooltip from "./custom-tooltip";   // <- keep alpha order

Likewise, move the customTooltip entry below tooltip → customStyles in the exported object.

apps/docs/content/components/slider/custom-tooltip.ts (1)

1-9: Minor: rename helper constant for clarity

react is a bit too generic and shadows the common “React” identifier.
Consider something self-descriptive like exampleFiles.

-const react = {
+const exampleFiles = {
   "/App.jsx": App,
 };
 
 export default {
-  ...react,
+  ...exampleFiles,
 };

Purely stylistic – feel free to ignore.

apps/docs/content/components/slider/custom-tooltip.raw.jsx (1)

4-23: Extract the padding helper outside the component to avoid redeclaring on every render

pad and, less importantly, formatMillisecondsToHHMMSS are recreated on each render.
For a demo component this is negligible, but in production code or when the function is passed around it’s better to memoise / hoist.

-  const formatMillisecondsToHHMMSS = (milliseconds) => {
+  const formatMillisecondsToHHMMSS = React.useCallback((milliseconds) => {
     …
-    const pad = (num) => String(num).padStart(2, "0");
+    const pad = (num) => String(num).padStart(2, "0");
     return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
-  };
+  }, []);

apps/docs/content/docs/components/slider.mdx (2)

98-103: Minor wording & casing polish

Sentence starts with a lowercase “the” and reads a bit clunky.

-You can use the `getTooltipValue` prop to customize the content displayed in the tooltip by returning a string or a number from the function. the existing `tooltipValueFormatOptions` prop can be used for additional formatting when number is returned.
+You can use the `getTooltipValue` prop to customise the tooltip content by returning either a string or a number. The existing `tooltipValueFormatOptions` prop can further format the number when one is returned.

🧰 Tools

🪛 LanguageTool

[uncategorized] ~101-~101: Possible missing article found.
Context: ... be used for additional formatting when number is returned. <CodeDemo title="Custom t...

(AI_HYDRA_LEO_MISSING_A)

---

270-276: Docs table: default column shows “-” but the feature really defaults to undefined

For consistency with other rows (getValue, etc.) and the README, consider changing the default column to undefined so that generated docs stay in sync.

🧰 Tools

🪛 LanguageTool

[uncategorized] ~273-~273: Did you mean “precedent”? (As in ‘set an example’)
Context: ...tooltipProps.content is set, it takes precedence.", default: "-" }, { ...

(PRECEDENT_PRECEDENCE_CONFUSION)

packages/components/slider/stories/slider.stories.tsx (1)

356-365: Optional: re-use tooltipValueFormatOptions for currency instead of string concatenation

Since the underlying implementation already supports number formatting, the multi-thumb story could leverage that instead of embedding the “$” symbol manually. This keeps examples aligned with the recommended API.

Not blocking—story works as is.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 15b3e9e and 6b4a1bf.

📒 Files selected for processing (9)

• apps/docs/content/components/slider/custom-tooltip.raw.jsx (1 hunks)
• apps/docs/content/components/slider/custom-tooltip.ts (1 hunks)
• apps/docs/content/components/slider/index.ts (2 hunks)
• apps/docs/content/docs/components/slider.mdx (3 hunks)
• packages/components/slider/README.md (1 hunks)
• packages/components/slider/__tests__/slider.test.tsx (1 hunks)
• packages/components/slider/src/use-slider-thumb.ts (4 hunks)
• packages/components/slider/src/use-slider.ts (3 hunks)
• packages/components/slider/stories/slider.stories.tsx (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (2)

packages/components/slider/src/use-slider-thumb.ts (1)

packages/components/slider/src/use-slider.ts (1)

• SliderValue (21-21)

packages/components/slider/stories/slider.stories.tsx (1)

packages/components/slider/src/use-slider.ts (1)

• SliderValue (21-21)

🪛 LanguageTool

packages/components/slider/README.md

[uncategorized] ~11-~11: Did you mean “precedent”? (As in ‘set an example’)
Context: ...tooltipProps.content is set, it takes precedence. | undefined ...

(PRECEDENT_PRECEDENCE_CONFUSION)

apps/docs/content/docs/components/slider.mdx

[uncategorized] ~101-~101: Possible missing article found.
Context: ... be used for additional formatting when number is returned. <CodeDemo title="Custom t...

(AI_HYDRA_LEO_MISSING_A)

---

[uncategorized] ~273-~273: Did you mean “precedent”? (As in ‘set an example’)
Context: ...tooltipProps.content is set, it takes precedence.", default: "-" }, { ...

(PRECEDENT_PRECEDENCE_CONFUSION)

---

[uncategorized] ~442-~442: Did you mean “precedent”? (As in ‘set an example’)
Context: ...tooltipProps.content is set, it takes precedence over the value generated by `getTooltip...

(PRECEDENT_PRECEDENCE_CONFUSION)

🔇 Additional comments (5)

apps/docs/content/components/slider/custom-tooltip.raw.jsx (1)

7-9: Input parameter type is misleading

milliseconds is documented/expected to be a number, but the code silently accepts an array and picks element 0.
If multi-thumb formatting is required, expose index explicitly instead of overloading the type.

getTooltipValue={(value, idx) =>
  formatMillisecondsToHHMMSS(Array.isArray(value) ? value[idx] : value)
}

packages/components/slider/__tests__/slider.test.tsx (2)

461-482: Percent formatting assertion looks off

Intl.NumberFormat({style:"percent"}) expects 0.5 ➜ 50 %, not 50 ➜ 5 000 %.
The test currently asserts "5,000%" for an input value of 50, which might mask an upstream problem (value should probably be divided by 100).

Please confirm the intended behaviour:

- expect(tooltip).toHaveTextContent("5,000%");
+ expect(tooltip).toHaveTextContent("50%");

If the raw value really is 50, consider converting inside getTooltipValue.

---

426-457: getTooltipValue receives the entire values array – double-check API contract

Here the mock’s signature (value, index) => value[index] implies that the hook passes the full array as first arg when multiple thumbs are in use.

Most users will expect (singleValue, index) instead.
Ensure the implementation in use-slider-thumb.ts matches the intended public API; otherwise this test may lock-in an awkward signature.

packages/components/slider/src/use-slider.ts (2)

121-128: Doc comment: clarify formatting behaviour

“In addition to formatting with tooltipValueFormatOptions if number is returned.”

The sentence is ambiguous. Suggest:

- * In addition to formatting with tooltipValueFormatOptions if number is returned.
+ * If the callback returns a number it will be formatted with
+ * `tooltipValueFormatOptions` (or `formatOptions` as fallback).

[nitpick]

---

378-380: Missing default prevents undefined check in thumb hook

getTooltipValue can be undefined, but downstream code may call it directly.
Add a safety default or null-check in use-slider-thumb.ts to avoid runtime errors.

const tooltipContent =
  typeof getTooltipValue === "function"
    ? getTooltipValue(state.values, index)
    : undefined;

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
heroui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 14, 2025 4:35pm
heroui-sb	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 14, 2025 4:35pm

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5384

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5384

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5384

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5384

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5384

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5384

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5384

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5384

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5384

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5384

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5384

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5384

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5384

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5384

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5384

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5384

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5384

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5384

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5384

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5384

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5384

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5384

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5384

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5384

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5384

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5384

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5384

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5384

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5384

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5384

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5384

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5384

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5384

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5384

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5384

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5384

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5384

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5384

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5384

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5384

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5384

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5384

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5384

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5384

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5384

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5384

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5384

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5384

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5384

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5384

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5384

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5384

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5384

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5384

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5384

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5384

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5384

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5384

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5384

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5384

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5384

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5384

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5384

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5384

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5384

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5384

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5384

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5384

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5384

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5384

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5384

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5384

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5384

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5384

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5384

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5384

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5384

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5384

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5384

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5384

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5384

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5384

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5384

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5384

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5384

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5384

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5384

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5384

commit: d3f5d08

[ararTP]

What's the status now?
Waiting for code owner approve?

[wingkwong]

@ararTP I requested 4 changes but didn't see you've pushed any commits.

[ararTP]

@ararTP I requested 4 changes but didn't see you've pushed any commits.

Doesn't it happens automatically when resolving? should I manually copy changes and commit?

[wingkwong]

@ararTP Clicking resolve doesn't do anything on the codebase. You need to work on them yourself. Normally you click it right after you push something that resolves the corresponding comment. I'll mark them open.

[ararTP]

@wingkwong , Oops, fixed.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

apps/docs/content/components/slider/custom-tooltip.raw.tsx (2)

9-11: Improve input validation with proper type guards.

The validation logic is solid, but consider adding an explicit type conversion for better type safety.

-if (isNaN(milliseconds) || milliseconds < 0) {
+const numValue = Number(milliseconds);
+if (isNaN(numValue) || numValue < 0) {
   return "00:00:00"; // Default for invalid input
 }

Then use numValue in the subsequent calculations.

---

29-29: Remove unnecessary type casting.

The type casting value as number suggests uncertainty about the type. Based on the comment and single-thumb usage, the value should already be a number.

-getTooltipValue={(value) => formatMillisecondsToHHMMSS(value as number)} //Single thumb, SliderValue is a number.
+getTooltipValue={(value) => formatMillisecondsToHHMMSS(value)} //Single thumb, SliderValue is a number.

This will also help identify if the function parameter typing needs adjustment.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5d65d2b and 238abfd.

📒 Files selected for processing (1)

• apps/docs/content/components/slider/custom-tooltip.raw.tsx (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

apps/docs/content/components/slider/custom-tooltip.raw.tsx (1)

apps/docs/content/components/slider/custom-tooltip.raw.jsx (1)

• formatMillisecondsToHHMMSS (4-23)

🔇 Additional comments (3)

apps/docs/content/components/slider/custom-tooltip.raw.tsx (3)

13-23: The time calculation logic is correct and well-implemented.

The mathematical calculations for converting milliseconds to hours, minutes, and seconds are accurate. The padding function ensures consistent two-digit formatting as intended.

---

25-37: Excellent demonstration of the new getTooltipValue functionality.

This component effectively showcases the new custom tooltip feature with a practical time formatting example. The implementation aligns well with the PR objectives to enhance tooltip customization.

---

26-36: Slider time configuration values are correct
Verified that the defaultValue of 3 665 000 ms formats to 01:01:05 (1 h 1 m 5 s), maxValue of 7 200 000 ms equals 2 h, and step of 1 000 ms equals 1 s. No changes needed.

[ararTP]

@wingkwong done