Evo uiUi elements
Quantity Selector
An interactive numeric input with animated transitions
This page documents Evo UI v1. For the current version, see Evo UI v2. Upgrading? Read the migration guide.
Overview
Quantity Selector provides an intuitive way to adjust numeric values with increment and decrement buttons. It features smooth slide animations when values change, automatic button state management based on min/max bounds, and supports both button clicks and direct text input for maximum flexibility.
Properties
Settings
| Name | Type | Description |
|---|---|---|
startQuantity | int | Initial value when component starts |
minQuantity | int | Minimum allowed value |
maxQuantity | int | Maximum allowed value |
Animation
| Name | Type | Description |
|---|---|---|
slideOffset | float | Distance text slides during transitions |
animationDuration | float | Total time for slide animation |
animationCurve | AnimationCurve | Curve for easing transitions |
References
| Name | Type | Description |
|---|---|---|
inputField | TMP_InputField | Text input for displaying and editing quantity |
increaseButton | Button | Button for incrementing value |
decreaseButton | Button | Button for decrementing value |
Events
| Name | Type | Description |
|---|---|---|
onValueChanged | UnityEvent<int> | Fired when quantity changes |
Public Methods
| Name | Parameters | Description |
|---|---|---|
Increase() | None | Increments value by 1 with animation |
Decrease() | None | Decrements value by 1 with animation |
SetQuantity(value, animate) | int, bool | Sets quantity with optional animation |
SetQuantity(value) | int | Sets quantity with animation |
Code Example
using UnityEngine;
using Evo.UI;
public class QuantitySelectorExample : MonoBehaviour
{
public QuantitySelector productQuantity;
void Start()
{
// Configure range
productQuantity.minQuantity = 1;
productQuantity.maxQuantity = 99;
// Listen for changes
productQuantity.onValueChanged.AddListener(quantity =>
{
Debug.Log($"Quantity changed to: {quantity}");
UpdatePrice(quantity);
});
// Set quantity programmatically
productQuantity.SetQuantity(5);
// Get current value
int currentQty = productQuantity.CurrentQuantity;
Debug.Log($"Current quantity: {currentQty}");
// Control without animation
productQuantity.SetQuantity(10, false);
}
void UpdatePrice(int quantity)
{
float pricePerUnit = 9.99f;
float totalPrice = quantity * pricePerUnit;
Debug.Log($"Total: ${totalPrice:F2}");
}
}