Skip to main content

Circular Slider

Overview​

The Circular Slider control is a versatile UI component that allows users to select a value by rotating a handle along a circular path. This control is particularly useful for applications that require a rotary input method, such as setting a timer, selecting a volume level, or adjusting other parameters that usually are represented with a dial control.

Circular Slider Sample

How to Use It​

To use the Circular Slider control in your application, follow these steps:

XAML Usage​

Add the Circular Slider control to your XAML page.

<grial:CircularSlider
    x:Name="circularSlider"
    Minimum="0"
    Maximum="100"
    Value="50"
    TrackColor="LightGray"
    ActiveColor="Blue"
    ThumbColor="Red"
    ValueChanged="OnCircularSliderValueChanged" />

Event Handling​

Handle the ValueChanged event in your code-behind to respond to user input.

private void OnCircularSliderValueChanged(object sender, ValueChangedEventArgs e)
{
    // Handle the value change
    double newValue = e.NewValue;
    // Update UI or perform other actions based on the new value
}
info

You can also use the commands DragCompletedCommand, DragStartedCommand, and ValueChangedCommand, to interact with the control.

Control API​