Radial Slider

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

RadialSliderExample.cs

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);
    }
}

On this page