Evo uiUi elements
Radial Slider
A circular slider built on top of Interactive
This page documents Evo UI v1. For the current version, see Evo UI v2. Upgrading? Read the migration guide.
Overview
Radial Slider extends Interactive and provides a circular input control for selecting a value by dragging around a ring. The slider updates its fill image and handle position based on user input or code driven changes.
Transition Effects
Interactive components support state based transitions through the Styler Object system. This includes color changes on hover, click, and other interactions. For more information, see the Styler page.
Interactive Features
Radial Slider inherits all event, audio, ripple, and trail functionality from Interactive.
For more information, see the Interactive page.
Properties
Slider Settings
| Name | Type | Description |
|---|---|---|
MinValue | float | Minimum slider value |
MaxValue | float | Maximum slider value |
Value | float | Current value (clamped between Min and Max) |
WholeNumbers | bool | If true, rounds value to nearest integer |
invokeAtStart | bool | Invokes onValueChanged when Start runs |
Radial Settings
| Name | Type | Description |
|---|---|---|
angleRange | float | Total degrees the slider covers |
startAngle | float | Base rotation offset |
handleOffset | float | Extra radius offset for the handle |
clockwise | bool | Moves slider clockwise instead of CCW |
allowContinuousDrag | bool | Allows infinite drag without range blocking |
Formatting
| Name | Type | Description |
|---|---|---|
displayMultiplier | float | Multiplier applied before displaying value |
displayFormat | Slider.DisplayFormat | Fixed or thousands formatting |
textFormat | string | Format containing 0 placeholder |
References
| Name | Type | Description |
|---|---|---|
handleRect | RectTransform | The draggable handle |
fillImage | Image | Image used to display radial fill |
valueText | TMP_Text | Output text for current value |
valueInput | TMP_InputField | Input for manually typing values |
Events
| Name | Type | Description |
|---|---|---|
onValueChanged | UnityEvent<float> | Invoked when value changes |
Public Methods
| Name | Parameters | Description |
|---|---|---|
SetValue(float) | float | Sets value and updates visuals |
SetValueWithoutNotify(float) | float | Changes value without firing onValueChanged |
SetState(state, instant) | InteractionState, bool | Sets new interactive state |
SetInteractable(value) | bool | Toggles interactable state |
Code Example
using UnityEngine;
using Evo.UI;
public class RadialSliderExample : MonoBehaviour
{
public RadialSlider slider;
void Start()
{
// Setup values
slider.MinValue = 0;
slider.MaxValue = 100;
slider.Value = 40;
// Radial config
slider.angleRange = 270f;
slider.startAngle = 270f;
slider.clockwise = true;
// Display settings
slider.displayMultiplier = 1f;
slider.textFormat = "{0}%";
// Add listener
slider.onValueChanged.AddListener(val =>
{
Debug.Log("Radial value changed: " + val);
});
// Set state
slider.SetState(InteractionState.Normal);
slider.SetInteractable(true);
}
}