Wolfram Function Repository

Instant-use add-on functions for the Wolfram Language

Function Repository Resource:

 CircularSlider

Source Notebook

A control for cyclical data, such as angles or direction

Contributed by: George V. Woodrow III

ResourceFunction["CircularSlider"][x]

represents a control that returns the dynamic variable x, over the range {0,360}.

ResourceFunction["CircularSlider"][x,max]

represents a control that returns the dynamic variable x, over the range {0,max}.

ResourceFunction["CircularSlider"][x,max,dx]

represents a control that returns the dynamic variable x, over the range {0,max} with a step size dx.

Details and Options

In use, the control widget is free to rotate in either direction, and the returned value is constrained between 0 and max.
ResourceFunction["CircularSlider"] accepts the following options:
"Start""Top"sets the 0 point, and can take the values "Top", "Right", "Bottom", "Left"
"Direction""CW"sets the direction for increasing values: "CW", "CCW" or "ACW"
"ControlColor"Redsets the color of the control knob
"Background"ThemeColor["Background"]sets the background color. Use None for a transparent background
"TrackColor"LightYellowsets the color inside the track
"ShowValueQ"Truewhen True, shows the value of the slider in the center.
"Size"150sets the size of the control. It must be ≥ 0. Tiny,Small,Medium, or Large is also accepted.

Examples

Basic Examples (2) 

The default circular slider starts at the top and goes from 0 to 360 in the clockwise direction:

In[1]:=
DynamicModule[{deg = 0}, ResourceFunction["CircularSlider"][deg]]
Out[1]=

Use only integer values, for example, using the dx parameter:

In[2]:=
DynamicModule[{deg = 0}, ResourceFunction["CircularSlider"][deg, 100, 1]]
Out[2]=

Scope (1) 

Use an angle in radians. 0 is to the right, the direction is counter-clockwise, and the range is 0 to 2π:

In[3]:=
DynamicModule[{deg = 0}, {ResourceFunction["CircularSlider"][deg, 2 \[Pi], 0, "ControlColor" -> Green, "Start" -> "Right", "Direction" -> "CCW"], Dynamic[deg]}]
Out[3]=

Options (4) 

Control the position of the start using "Start":

In[4]:=
Table[Column[{DynamicModule[{deg = 30}, ResourceFunction["CircularSlider"][deg, "Start" -> i, "Size" -> Small]], i}, Center], {i, {"Top", "Right", "Bottom", "Left"}}] // Row
Out[4]=

Control the direction using "Direction":

In[5]:=
Table[Column[{DynamicModule[{deg = 0}, ResourceFunction["CircularSlider"][deg, "Direction" -> i, "Size" -> Small]], i}, Center], {i, {"CW", "CCW", "ACW"}}] // Row
Out[5]=

By default, the widget works in light and dark mode automatically. If you select your own background color, the color of the text and 0-indicator are adjusted automatically:

In[6]:=
DynamicModule[{deg = 45.}, ResourceFunction["CircularSlider"][deg, 360, 1, "ControlColor" -> Blue, "Background" -> Red ]]
Out[6]=

If you set the background to None, the existing background is used:

In[7]:=
Panel[DynamicModule[{deg = 135.}, ResourceFunction["CircularSlider"][deg, 360, 1, "ControlColor" -> Blue, "Background" -> None ]], Background -> LightGreen, ImageSize -> {300, 200}]
Out[7]=

Showing the value is optional:

In[8]:=
DynamicModule[{deg = 0}, {ResourceFunction["CircularSlider"][deg, 2 \[Pi], 0, "ShowValueQ" -> False, "Start" -> "Right", "Direction" -> "CCW"], Dynamic[deg]}]
Out[8]=

Properties and Relations (1) 

CircularSlider is similar to the resource function: CircularWinder. However, CircularSlider is more closely related to Slider in both appearance and functionality.

This example illustrates the similarities and differences between CircularSlider and Slider:

In[9]:=
DynamicModule[{deg = 45}, {ResourceFunction["CircularSlider"][deg, 360, 1, "ControlColor" -> Blue], Style[Slider[Dynamic[deg], {0, 360, 1}, Appearance -> "Labeled"], ControlsRendering -> Automatic], Dynamic[deg] }]
Out[9]=

Publisher

George Woodrow III

Version History

  • 1.0.0 – 01 April 2026

Related Resources

License Information