Loading...
Loading...
Implement and configure Syncfusion RadialSlider control in Windows Forms - a circular slider for visual numeric value selection with rotating needle. Use when creating circular value selection controls, rotary inputs, dial-based controls, or radial numeric input. Covers circular value selection, rotating needle control, dial-based input, visual value picker with divisions, and radial numeric input controls.
npx skill4agent add syncfusion/winforms-ui-components-skills syncfusion-winforms-radial-sliderMinimumValueMaximumValueValueSliderDivisionSliderStyleStyleNeedleTypeValueChangedDrawTextusing System;
using System.Windows.Forms;
using Syncfusion.Windows.Forms.Tools;
public partial class VolumeControl : Form
{
private RadialSlider volumeSlider;
private Label lblVolume;
public VolumeControl()
{
InitializeComponent();
SetupVolumeControl();
}
private void SetupVolumeControl()
{
// Create radial slider
volumeSlider = new RadialSlider
{
Location = new System.Drawing.Point(50, 50),
Size = new System.Drawing.Size(250, 250),
MinimumValue = 0,
MaximumValue = 100,
Value = 50,
SliderDivision = 10,
SliderStyle = SliderStyles.Frame
};
// Create label for volume display
lblVolume = new Label
{
Location = new System.Drawing.Point(50, 310),
Size = new System.Drawing.Size(250, 30),
Text = "Volume: 50",
TextAlign = System.Drawing.ContentAlignment.MiddleCenter
};
// Handle value changes
volumeSlider.ValueChanged += VolumeSlider_ValueChanged;
// Add to form
this.Controls.Add(volumeSlider);
this.Controls.Add(lblVolume);
}
private void VolumeSlider_ValueChanged(object sender, RadialSlider.ValueChangedEventArgs e)
{
lblVolume.Text = $"Volume: {volumeSlider.Value}";
}
}Imports System
Imports System.Windows.Forms
Imports Syncfusion.Windows.Forms.Tools
Public Partial Class VolumeControl
Inherits Form
Private volumeSlider As RadialSlider
Private lblVolume As Label
Public Sub New()
InitializeComponent()
SetupVolumeControl()
End Sub
Private Sub SetupVolumeControl()
' Create radial slider
volumeSlider = New RadialSlider With {
.Location = New System.Drawing.Point(50, 50),
.Size = New System.Drawing.Size(250, 250),
.MinimumValue = 0,
.MaximumValue = 100,
.Value = 50,
.SliderDivision = 10,
.SliderStyle = SliderStyles.Frame
}
' Create label for volume display
lblVolume = New Label With {
.Location = New System.Drawing.Point(50, 310),
.Size = New System.Drawing.Size(250, 30),
.Text = "Volume: 50",
.TextAlign = System.Drawing.ContentAlignment.MiddleCenter
}
' Handle value changes
AddHandler volumeSlider.ValueChanged, AddressOf VolumeSlider_ValueChanged
' Add to form
Me.Controls.Add(volumeSlider)
Me.Controls.Add(lblVolume)
End Sub
Private Sub VolumeSlider_ValueChanged(sender As Object, e As RadialSlider.ValueChangedEventArgs)
lblVolume.Text = $"Volume: {volumeSlider.Value}"
End Sub
End Classprivate RadialSlider tempSlider;
private void SetupTemperatureControl()
{
tempSlider = new RadialSlider
{
MinimumValue = 0,
MaximumValue = 100,
Value = 25,
SliderDivision = 10,
Style = RadialSliderStyle.Office2016Colorful
};
// Custom text formatting with degree symbol
tempSlider.DrawText += TempSlider_DrawText;
this.Controls.Add(tempSlider);
}
private void TempSlider_DrawText(object sender, RadialSlider.DrawTextEventArgs e)
{
// Add degree Celsius symbol
e.Text += "°C";
// Color code by temperature range
int temp = int.Parse(e.Text.Replace("°C", ""));
if (temp <= 33)
{
e.ForeColor = System.Drawing.Brushes.Blue; // Cold
}
else if (temp > 33 && temp <= 66)
{
e.ForeColor = System.Drawing.Brushes.Orange; // Warm
}
else
{
e.ForeColor = System.Drawing.Brushes.Red; // Hot
}
}private void CreateCustomStyledDial()
{
RadialSlider dial = new RadialSlider
{
Size = new System.Drawing.Size(280, 280),
MinimumValue = 0,
MaximumValue = 200,
SliderDivision = 20,
// Custom colors
BackgroundColor = System.Drawing.Color.FromArgb(30, 30, 30), // Dark background
InnerCircleColor = System.Drawing.Color.FromArgb(60, 60, 60),
OuterCircleColor = System.Drawing.Color.FromArgb(80, 80, 80),
SliderNeedleColor = System.Drawing.Color.LimeGreen,
ForeColor = System.Drawing.Color.White,
// Dotted needle for modern look
NeedleType = SliderNeedleType.DottedLine,
SliderStyle = SliderStyles.Frame
};
this.Controls.Add(dial);
}private RadialSlider fontSizeSlider;
private RichTextBox textPreview;
private void SetupFontSizeSelector()
{
// Create slider for font size selection
fontSizeSlider = new RadialSlider
{
MinimumValue = 8,
MaximumValue = 72,
Value = 12,
SliderDivision = 8
};
// Create preview textbox
textPreview = new RichTextBox
{
Text = "Sample Text",
ReadOnly = true
};
// Update font size on value change
fontSizeSlider.ValueChanged += (s, e) =>
{
textPreview.SelectionFont = new System.Drawing.Font(
textPreview.Font.Name,
(float)fontSizeSlider.Value
);
};
this.Controls.Add(fontSizeSlider);
this.Controls.Add(textPreview);
}| Property | Type | Default | Purpose |
|---|---|---|---|
| | | Starting value of slider range |
| | | Ending value of slider range |
| | | Current selected value |
| | | Number of division markers |
| | | Visual style (Default, Frame) |
| | | Theme (Default, Office2016*) |
| | System default | Background color |
| | System default | Inner circle color |
| | System default | Outer circle color |
| | System default | Needle color |
| | System default | Text color |
| | | Needle appearance |
| | | Show/hide outer circle |
Syncfusion.Tools.WindowsSyncfusion.Windows.Forms.Tools