Number

A Number variable stores numeric values, including both integers (whole numbers) and decimals (floating-point numbers). It's essential for mathematical calculations, counters, prices, quantities, and any numeric data.

When to Use

Use Number variables when you need to:

• Perform mathematical calculations

• Store quantities, counts, or indices

• Manage prices, amounts, or measurements

• Track progress, scores, or ratings

• Store API responses containing numeric data

Examples

Integers

42
0
-15
1000

Decimals

3.14
-0.5
99.99
0.001

Common Use Cases

1. Counters

Track counts like cart items, unread messages, or page numbers:

Variable: itemCount (Number)
Initial Value: 0

On Add Button Click:
  Set State: itemCount = ${sum(itemCount, 1)}

On Remove Button Click:
  Set State: itemCount = ${if(gt(itemCount, 0), diff(itemCount, 1), 0)}

2. Pricing and Currency

Store and display prices:

Variable: price (Number)
Value: 29.99

Variable: quantity (Number)
Value: 3

Variable: total (Number)
Value: ${mul(price, quantity)}

Text Widget:
  Text: ${concat("Total: $", total)}

3. Progress Tracking

Calculate percentages or progress:

Variable: completedTasks (Number)
Value: 7

Variable: totalTasks (Number)
Value: 10

Variable: progressPercent (Number)
Value: ${mul(divide(completedTasks, totalTasks), 100)}

Linear Progress Bar:
  Value: ${progressPercent}

4. Index Tracking

Track current positions in lists or pages:

Variable: currentPage (Number)
Initial Value: 0

On Next Button Click:
  Set State: currentPage = ${sum(currentPage, 1)}

Working with Numbers

Mathematical Operations

Perform calculations using math function operators:

Addition: ${sum(num1, num2)}
Subtraction: ${diff(num1, num2)}
Multiplication: ${mul(num1, num2)}
Division: ${divide(num1, num2)}
Modulo: ${modulo(num1, num2)}

Math Functions

Use mathematical functions for complex operations. See the Math Operators documentation for all available functions:

• abs() - Absolute value

• ceil() - Round up

• floor() - Round down

• clamp() - Constrain a value within a range

Comparisons

Compare numbers using logical operator functions:

${gt(num1, num2)}
${lt(num1, num2)}
${gte(num1, num2)}
${lte(num1, num2)}
${isEqual(num1, num2)}

Formatting Numbers

Currency Formatting

Format as currency:

${concat("$", price)}  // "$29.99"

Best Practices

• Initialize with sensible defaults: Set initial values to prevent undefined behavior (e.g., 0 for counters, 1 for page numbers)

• Avoid division by zero: Always check denominators before division

• Use appropriate precision: Round or fix decimal places when displaying money or percentages

• Handle edge cases: Consider negative numbers, very large numbers, or zero when performing calculations

• Type safety: Ensure API responses are actually numbers before using them in calculations

Common Patterns

Incrementing/Decrementing

Set State: count = ${sum(count, 1)}
Set State: count = ${diff(count, 1)}

Clamping Values

Keep values within a range:

Set State: volume = ${clamp(newVolume, 0, 100)}

Calculating Percentages

${mul(divide(value, total), 100)}

Conditional Logic

${if(gt(count, 0), concat("Items: ", count), "No items")}

Related Documentation

• Math Operators - All available mathematical functions

• Logical Operators - Comparison and conditional logic

• Variables Overview - Learn about all variable types