Getting Started with Windows Forms Radial Slider

2 Nov 20229 minutes to read

This section briefly describes how to create a new Windows Forms project in Visual Studio and add the RadialSlider control with its basic functionalities.

Assembly deployment

Refer to the Control Dependencies section to get the list of assemblies or details of NuGet package that needs to be added as reference to use the control in any application.

Refer to this documentation to find more details about installing NuGet packages in a Windows Forms application.

Adding the RadialSlider control via designer

The following steps describe how to create an RadialSlider control via the designer.

1. Create a new Windows Forms application in Visual Studio.

2. Add the RadialSlider control to an application by dragging it from the toolbox to the design view. The following dependent assemblies will be added automatically:

   • Syncfusion.Grid.Base
   • Syncfusion.Grid.Windows
   • Syncfusion.Shared.Base
   • Syncfusion.Shared.Windows
   • Syncfusion.Tools.Base
   • Syncfusion.Tools.Windows

1. Set the desired properties for RadialSlider control using the Properties dialog.

Adding the RadialSlider control via code

The following steps explain how to create a RadialSlider control programmatically:

1. Create a C# or VB application via Visual Studio.

2. Add the following assembly references to the project:

   • Syncfusion.Grid.Base
   • Syncfusion.Grid.Windows
   • Syncfusion.Shared.Base
   • Syncfusion.Shared.Windows
   • Syncfusion.Tools.Base
   • Syncfusion.Tools.Windows

3. Include the required namespace.

​

C#

using Syncfusion.Windows.Forms.Tools;

VB.NET

Imports Syncfusion.Windows.Forms.Tools

1. Create an instance of the RadialSlider control, and then add it to the form.

​

C#

RadialSlider radialSlider1 = new RadialSlider();
   radialSlider1.Size = new System.Drawing.Size(282, 282);
   this.Controls.Add(radialSlider1);

VB.NET

Dim radialSlider1 As RadialSlider = New RadialSlider
   radialSlider1.Size = New System.Drawing.Size(282, 282)
   Me.Controls.Add(radialSlider1)

Values

The value of RadialSlider control can be restricted within the minimum and maximum limits.

• MinimumValue - The slider initial value depends on its minimum value, and the default minimum value is 0. The minimum value can be changed using the MinimumValue property.

• MaximumValue - The slider end value depends on its maximum value, and the default maximum value is 10. The maximum value can be changed using the MaximumValue property.

• Value - The Value property of slider is used to get the currently selected value or change it to the required value.

C#

radialSlider1.MinimumValue = 50;
radialSlider1.MaximumValue = 100;
radialSlider1.Value = 50;

VB.NET

radialSlider1.MinimumValue = 50
radialSlider1.MaximumValue = 100
radialSlider1.Value = 50

Slider Value Changed Event

You can get the current slider value using the ValueChanged event.

C#

this.radialSlider1.ValueChanged += new Syncfusion.Windows.Forms.Tools.RadialSlider.ValueChangedEventHandler(radialSlider1_ValueChanged);

private void radialSlider1_ValueChanged(object sender, Syncfusion.Windows.Forms.Tools.RadialSlider.ValueChangedEventArgs args)
{
  this.richTextBox1.SelectionFont = new System.Drawing.Font(Font.Name, (float)this.radialSlider1.Value);
  this.Refresh();
}

VB.NET

AddHandler Me.radialSlider1.ValueChanged, AddressOf Me.radialSlider1_ValueChanged

Private Sub radialSlider1_ValueChanged(ByVal sender As Object, ByVal args As Syncfusion.Windows.Forms.Tools.RadialSlider.ValueChangedEventArgs)
Me.richTextBox1.SelectionFont = New System.Drawing.Font(Font.Name, CType(Me.radialSlider1.Value,Single))
Me.Refresh
End Sub

Division

The division for the RadialSlider can be customized using the SliderDivision property. The default slider division is 10.

C#

radialSlider1.SliderDivision = 5;

VB.NET

Me.radialSlider1.SliderDivision = 5

Text formatting

You can customize the text format for specific or all sliders by handling the DrawText event. You can change the content, foreground and font of the slider intervals, selected slider or selected value by using the DrawTextEventArgs.Text, DrawTextEventArgs.ForeColor and DrawTextEventArgs.Font properties. You can differentiate the slider intervals, selected slider and selected value by using the DrawTextEventArgs.TextType enum property.

C#

RadialSlider radialSlider = new RadialSlider();
radialSlider.DrawText += RadialSlider_DrawText;
radialSlider.MinimumValue = 0;
radialSlider.MaximumValue = 100;

private void RadialSlider_DrawText(object sender, RadialSlider.DrawTextEventArgs e) {
    int Value = int.Parse(e.Text);
    e.Text += "°C";
    if (e.TextType == TextType.Interval) {                
        if (Value <= 33) {
            e.Font = new Font("Arial", 8);
            e.ForeColor = Brushes.Green;
        }
        else if (Value > 33 && Value <= 66) {
            e.Font = new Font("Courier", 10);
            e.ForeColor = Brushes.Gold;
        }
        else {
            e.Font = new Font("Georgia", 10);
            e.ForeColor = Brushes.Red;
        }
    }
    else if(e.TextType== TextType.Pointer) {
        e.Font = new Font("Segoe UI Black", 8);
        e.ForeColor = Brushes.Blue;
    }
    else if (e.TextType == TextType.Value) {
        e.Font = new Font("MoolBoran", 12);
        e.ForeColor = Brushes.DeepPink;
    }
}

NOTE

View Sample in GitHub

Slider Style

The RadialSlider supports two different styles to its appearance using the SliderStyle property.

• Default - Renders the slider control with two hollow circles and a small circle as center with its dividend ticks.

• Frame - Paints the background of the slider control with an HQ frame.

C#

radialSlider1.SliderStyle = Syncfusion.Windows.Forms.Tools.SliderStyles.Frame;

VB.NET

radialSlider1.SliderStyle = Syncfusion.Windows.Forms.Tools.SliderStyles.Frame

The outside circle can be shown using the ShowOuterCircle property. The default value of this property is set to ‘True’.

C#

radialSlider1.ShowOuterCircle = true;

VB.NET

Me.radialSlider1.ShowOuterCircle = True