Getting Started with WPF Radial Slider (SfRadialSlider)

This section describes how to design a SfRadialSlider control in a WPF application and overview of its basic functionalities.

Assembly deployment

Namespace: Syncfusion.Windows.Controls.Navigation

Assembly: Syncfusion.SfRadialMenu.WPF (in Syncfusion.SfRadialMenu.WPF.dll)

Creating simple application with SfRadialSlider

The SfRadialSlider control can be added to an application using Visual Studio.

You can create the WPF application with SfRadialSlider control as follows:

  1. Creating project
  2. Adding control via designer
  3. Adding control manually in code

Creating the project

The steps to create a SfRadialSlider control by using Visual Studio in C# are as follows:

  1. Open Visual Studio.

  2. On the File menu, select New -> Project. This opens the New Project Dialog box.

Adding control via designer

SfRadialSlider control can be added to the application by dragging it from the toolbox and dropping it in a designer view. The following required assembly references will be added automatically:

  • Syncfusion.SfRadialMenu.WPF
  • Syncfusion.SfShared.WPF

Adding control via designer

<syncfusion:SfRadialSlider  Minimum="0" Maximum="100" />

Adding control manually in code

The following code sample shows how to create the SfRadialSlider from code-behind.

SfRadialSlider sfRadialSlider = new SfRadialSlider() {Minimum = 0, Maximum = 100};
Dim sfRadialSlider As SfRadialSlider = New SfRadialSlider

sfRadialSlider.Minimum = 0

sfRadialSlider.Maximum = 100

Adding control manually in code

Configuration of SfRangeSlider

Value

Gets or sets the value of the Radial Slider.

<syncfusion:SfRadialSlider Minimum="0" Maximum="100" Value="40"/>

The value can be changed by dragging the pointer along the circular track.

Value

Ticks

Ticks are placed along the round track in a uniform manner. The position of tick marks can be customized.

Tick Frequency

The TickFrequency property is used to define the number of ticks along the track, based on Minimum and Maximum values.

<syncfusion:SfRadialSlider Minimum="0" Maximum="100"  TickFrequency="5" />

Tick Frequency

Small Change

The SmallChange property can be used to control the smallest possible range of value to be selected in Radial Slider. For example, if SmallChange is set to 5, then it is only possible to select values that are multiples of 5.

<syncfusion:SfRadialSlider Minimum="0" Maximum="100" SmallChange="5" />