Circular UI Sliders in Unity - 360 Degrees of Slider Madness

In this Unity UI tutorial, I'll show how to set up a 360 Degree Unity UI Circle Slider. Then as a bonus, I'll add a C# Script to animate the slider over time. My discord link ► https://discord.gg/DgUdNDT7KU ► Download Unity at https://unity.com Chapters: 00:00 Introduction 00:18 Set up UI Can

A circular timer ring is one of those UI elements that looks like it needs a custom shader and doesn't. Unity's stock Slider component, given a circle sprite and a radial fill, does the whole job. This guide walks through building a non-interactive circular slider that drains clockwise as time runs out.

Step 1 — Set up the canvas Add a UI Slider to the scene. Unity creates a canvas automatically, since a slider has to live inside one. Configure the canvas first: set the UI Scale Mode to Scale With Screen Size, set the reference resolution to 1080 by 1920 for a portrait mobile layout, and set Screen Match Mode to Expand. Doing this before you size anything else saves you from re-measuring later.

Step 2 — Size and position the slider Select the slider and make it square — 400 by 400. A circular fill only reads correctly if the container is square; any other aspect ratio gives you an ellipse. Set the RectTransform anchor to the upper left corner, then move the slider into that corner so it anchors and positions consistently across screen sizes. Finally, uncheck Interactable. This slider represents elapsed time, not player input, and turning interactivity off prevents stray clicks from scrubbing it.

Step 3 — Strip out the handle Expand the slider in the hierarchy. It contains a Background, a Fill Area, and a Handle Slide Area. Since the slider isn't interactable, delete the Handle Slide Area entirely — there's nothing for the player to grab. That leaves Background, Fill Area, and the Fill nested inside it.

Step 4 — Swap in a circle sprite Background and Fill both use Unity's default rounded rectangle sprite. Drop a circle sprite into the Source Image field on each. It won't look circular yet, because the child rects are still sized for a horizontal bar. Select all three — Background, Fill Area, and Fill — and set their RectTransforms to stretch across the full width and height of the slider. Zero out the left, right, top, and bottom offsets so each one fills the entire 400 by 400 square. At that point the slider snaps into a proper circle.

Step 5 — Color the ring Darken the Background slightly relative to your scene background so the empty portion of the ring reads as a subtle track rather than a solid disc. For the Fill, pick something with contrast — a bright blue pops nicely and makes the remaining time obvious at a glance.

Step 6 — Switch the fill to radial Drag the slider's Value field and you'll see the fill stretch horizontally, which isn't what you want. Select the Fill object and change its Image Type from Simple to Filled. The default Fill Method is Radial 360, which is exactly right (Radial 180 and Radial 90 are there if you need a partial arc). Change the Fill Origin from Bottom to Top, since a timer reading from the twelve o'clock position is the convention players expect.

Step 7 — Reverse the direction Drag the value again and the ring fills counter-clockwise. For a countdown you want the opposite: the ring should start full and unwind clockwise. Uncheck the Clockwise checkbox on the Fill image. Now a value of 1 is a complete ring and dragging toward 0 drains it clockwise, which reads as time running out.

Step 8 — Animate it Attach a script that lerps the slider value from 1 to 0 over a set duration. Set the duration field to 10 seconds and assign the slider you just built to the script's slider reference. Press play and the ring drains smoothly over ten seconds — a finished circular timer built entirely from stock Unity UI components.