An advanced calculator component that lets you display calculations based on user input from any number of sliders and selectors. Think of it like a pricing calculator where users can adjust values and see results update in real-time - perfect for things like mortgage calculators, subscription pricing, or any math-based displays. The formuala is calculated using variables (assigned to selectors and sliders) and javascript expressions. The formula can be easily created using any AI tool.
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
First, you'll need to set up input components that will feed values into your formula:
Sliders
Each slider needs a unique variable name (like "users" or "price")
Configure min/max values and step size
These variables become available for your formula
Selectors
Each selector needs a unique variable name (like "plan")
Each selector needs a data value (like "pro", "plus"). Configure data-value for each option
This variable and value become available for your formula
Display Component
Formula: Use variable names from sliders/selectors (e.g., "users * price" or just "users" to display the value only)
Prefix/Suffix: Add symbols like $ or %
Visual customization: Font, colors, formatting options
To calculate the formula, you can ask chatGPT or any other AI tool to "Generate a javascript expression like {insert and example from the example file} to calculate {your query} based on my variables {your variable names} and values for variables {your selector options}"
Use Debug mode: Shows live variable values and formula calculation to help you calculate accurately. If you're still having issues, do not hesitate to contact us
The Display component works like a smart calculator that connects with sliders and selectors to show instant calculations. Imagine you're building a pricing calculator - you add sliders for things like "number of users" or "months of service," and selectors for selecting different plans. Each slider and selector gets a unique name (like "users" or "planType").
Then, you set up the Display component with a formula using these names (like "users * 10 + 20"). You can make the formula as detailed or as simple as you'd like with basic javascript.
As people move the sliders or change selections, the Display component automatically grabs these values and updates the calculation in real-time. You can dress it up with dollar signs, commas for big numbers, and customize how it looks.
For any queries and help setting up the component, contact hello@segmentui.com
Nabeel
