antd-group-slider

antd-group-slider is a React component library that extends Ant Design's slider to handle multiple related ranges. It provides synchronized sliders with descriptions, ensuring users avoid accidental gaps when inputting range data.

Key Features

• Multiple Range Input — Input several related ranges with individual sliders and descriptions.
• Data Synchronization — Sliders automatically sync to prevent overlapping or missing ranges.
• Customizable Descriptions — Add text or textarea descriptions for each range with configurable placeholders and separators.
• Dynamic Range Management — Add or remove ranges via buttons with customizable button text.
• Initial Value Configuration — Set initial ranges and descriptions, with options to automatically fill gaps.
• Visual Enhancements — Optionally show dividers between ranges and add extra components under each slider line.

Philosophy

The component emphasizes user experience by preventing input errors through synchronized sliders, making it ideal for applications requiring precise multi-range data entry.