How to create multi-value radial slider

Hi,

I would like to create a multi-value radial slider in Unity. [see Image]
81907-multivalueradial.png

Each colored portion of the slider has its own percentage. I can touch the black dots and move them around to change the percentages.

What would you recommend would be the best way to make this happen?

Thanks for the help & best regards.

I just came across your question again. I hadn’t the time to answer it back then when you posted it but i had the tab still open ^^.

Well there are several open questions about the desired behaviour. First of all such a slider doesn’t have a start nor an end, however there has to be some rules to this. First of all each black dot would represent one distinct color. Now there are two general behaviours possible:

  • When the amount of a color becomes 0 you can’t drag the dot any further. It basically “collides” with the next point. This will keep the same order. The dots can still be moved 360++ around but always stay in the same order.
  • When you drag one dot beyond one of it’s neighbor dots the order of the dots would change. So for example lets assume the bottom point is the “yellow point” the right one is the “red point” and the left one is the “blue point”. When you drag the bottom (yellow) point to the right up beyond the red point, red and yellow would switch places in the order. So blue now goes from the blue point left to the red point on the right. Red on the other hand goes from the red point up to the yellow pont and yellow goes up to the magenta point. In this case each point can be moved freely 360°

The implementation depends highly on which of those two behaviours is needed / wanted. This is tricky to implement with the new GUI system but it might be possible.

I quickly implemented the second variant using the new UI system. (Dropbox download of unitypackage)

Note: I used a circle image with radius “64” but display it as 100x100 (radius 50). If you want a different radius or a thicker / thinner circle you might want to create your own image that fits your needs.

I’ve also added an example script that displays the 4 percentage values using the IMGUI.

94418-radialslider.png