A sophisticated, animated slider component that combines smooth interactions with real-time numerical feedback. Perfect for creating engaging price calculators, range selectors, or any interactive numerical input that requires visual feedback. Built with Framer Motion for buttery-smooth animations.

✨ Key Features

• Animated Numbers: Smooth transitions for both current value and calculated results
• Custom Formulas: Define calculations using simple mathematical expressions (e.g., A * 12)
• Dual Number Display: Shows both current value and calculated result simultaneously
• Responsive Design: Automatically adapts to any container width
• Rich Hover States: Polished interactions with customizable hover and active states

💡 Pro Tips

1. Use the formula property with A as your variable (e.g., A * 12 for yearly calculations)
2. Adjust the animation duration to match your project's feel (default: 750ms)
3. Use monospace fonts for numbers to prevent layout shifts during animations
4. Position the current value number relative to the thumb using the bottom property
5. Customize hover states for both the track and thumb to enhance interactivity
6. Use the flexDirection property to arrange result numbers vertically or horizontally

🎨 Styling Options

• Thumb Styling: Size and position, colors (default, hover, active states), border width and color
• Track Styling: Height and border radius, filled and remaining track colors, hover and active state colors
• Number Display: Font properties (family, size, weight), colors and positioning
• Show/hide options: Current value and result
• Custom result label text: Customize the text of the result section
• Layout: Flexible result section arrangement, customizable spacing and padding, alignment and justification options

This component brings professional-grade slider functionality to your Framer projects with the perfect balance of customization and ease of use. Whether you're building a pricing calculator or an interactive form, it provides a polished, responsive solution with minimal setup.