A powerful and highly customizable calculator component that lets you create interactive slider-based calculations with smooth animations. Perfect for pricing calculators, ROI estimators, or any numerical interactive elements in your Framer projects.

✨ Key Features

• Multiple Interactive Sliders: Add as many sliders as you need
• Custom Formulas: Create calculations between sliders using simple mathematical expressions
• Smooth Animations: Beautiful number transitions with configurable animation duration
• Fully Customizable Design: Style every aspect of your sliders and numbers
• Responsive: Adapts perfectly to any container width

♻️ Overrides

The component comes with three powerful overrides that let you display calculated results anywhere on your canvas:

withResult

• Apply to any text element to display formatted results (e.g., "$1,234")
• Automatically formats numbers with currency symbol and thousand separators
• Perfect for static text displays

withAnimatedResult

• Apply to Animated Number components to show animated numerical transitions
• Displays smooth counting animations between values
• Ideal for dynamic, engaging number presentations

withFullSetter

• Apply to Sliders Calculator component in order to propagate calculations to components with the overrides

💡 Pro Tips

1. Use the formula property to create calculations between sliders (e.g., monthSlider * investmentSlider)
2. Each slider needs a unique ID that you'll reference in your formula
3. Customize the animation duration to match your project's feel
4. Use monospace fonts for numbers to prevent layout shifts during animations
5. Combine withResult and withAnimatedResult overrides to create dynamic number displays anywhere on your canvas
6. Use multiple instances of overrides to show the same result in different formats across your design

🎨 Styling Options

• Sliders: Track colors, thumb styling, min/max values
• Numbers: Font properties, formatting, visibility options
• Layout: Flexible positioning and spacing controls

This component brings professional-grade calculator functionality to your Framer projects without requiring any coding knowledge, while maintaining the flexibility to customize every aspect of its appearance and display results anywhere in your design.