RangeFlow

RangeFlow is a date range picker component designed for React applications, offering an interactive way to select date intervals through a combination of a draggable slider, preset range tabs, and a popover calendar. It is intended for products and interfaces that require users to navigate or filter data across time periods. The component is built with TypeScript support and focuses on providing a smooth, visually integrated experience within React projects.

Key features of RangeFlow include a drag-native range slider that works with both mouse and touch input, allowing users to select and adjust date ranges intuitively. The slider supports snapping handles and can be constrained by minimum and maximum durations, ensuring that selections stay within defined limits. Quick-range tabs provide pre-defined windows such as 7, 30, or 90 days, with animated indicators for active selections. The popover calendar, which can be shown or hidden, enables single or multi-month date picking for more granular control. RangeFlow also supports disabling dates outside specified boundaries, which is useful for scenarios like locking date selection to the past.

Customization is a central aspect of the tool. Theming is managed via a single CSS variable, allowing the picker to match the application's design system. Slot-based composition lets developers replace or override visible parts of the component, such as tabs, labels, and value readouts. For advanced use cases, an imperative API is available through the useRangeFlow hook, which exposes methods for programmatic control, making it suitable for integration with forms, URL parameters, or external UI elements.

RangeFlow is distributed as a single npm package and a scoped CSS file, ensuring that styles do not leak globally. The installation process involves importing both the component and its styles at the root of a React app. RangeFlow represents a specialized framework or SDK component for handling date range selection in React environments.