May
17
2015

Radial Slider UI Test

An article by mgear

Quick test for radial UI slider, with color lerp & value display.

TODO:
– Allow starting from any angle (now 0 is at left middle)
– Options: Value display on/off, Color lerp on/off
– And other features from : http://anthonyterrien.com/knob/

WebGL player:
http://unitycoder.com/upload/demos/RadialSliderUI/

Sources:
radialsliderUI.unitypackage (*Unity 5.0.1f1)

How to:
– Track mouse position over image when mousebutton is down
– Get angle from center
– Adjust image fill amount (with fill method: Radial360)

References:
– Related forum topic: http://forum.unity3d.com/threads/radial-slider-circle-slider.326392/
– Getting mouse position over UI component: http://forum.unity3d.com/threads/eventtrigger-move-issue.325103/#post-2114563

Tags: circular, radial, slider, ui

About the Author:

.fi

4 Comments + Add Comment

360° Stereoscopic VR Videos with Unity 3D – Summit Games Entertainment 05/01/2017 at 16:55

[…] Radial Slider Bar for Unity UI (Optional) If you stream from any video link, you must show a menu radial slider bar which shows the progress of the download, as it will take some time to play: Here is the link of the Radial Slider package developed by “mgear” unity user:Radial Slider by mgear with values and lerp feature […]

Reply
mgear 03/09/2018 at 14:25

Customizable radial progress bar shader for Unity3D
https://github.com/AdultLink/RadialProgressBar

Reply
Dayon7 16/01/2019 at 22:56

you save mi life!. Good job

Reply
zeynab 26/07/2022 at 10:42

Thank you for creating it. It works so well!

Reply