Day Range
A component to visualize a current value relative to a low and high range, perfect for stock prices, temperature ranges, or goal tracking.
Examples
Basic
Today's low₹1,527.3
Today's high₹1,585
₹1,572.9
Installation
npx shadcn-extras@latest add day-range
Props
The DayRange component accepts the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
low | number | Required | The minimum value of the range. |
high | number | Required | The maximum value of the range. |
current | number | Required | The current value to indicate on the range. |
currencySymbol | string | '₹' | The symbol to prepend to the values. |
lowLabel | string | 'Today's low' | The label above the low value. |
highLabel | string | 'Today's high' | The label above the high value. |
formatValue | (value: number) => string | undefined | A custom formatter function for the values. |