How to create a circular slider that can cycle through a list of hot spots?

[Meredith_Levy]

Hi! I’m looking to create a circular slider which can be used to select different buttons by dragging it around. I would like to create a slider like those demonstrated in (How to make a circular slider in Axure? ), but instead of changing text, I would like it to cycle through a list of hot spots. Is there any way to do this?

[mbc66]

Check out this thread. I think the methods should work the same for RP9.

How to make a circular slider in Axure?

Hi! Here is a dynamic panel that rotates when you drag the circle inside of it. If you want to find out what the current rotation is (between 0 and 360), use the OnRotate interaction of the outer dynamic panel (“rotatingPanel”) and test for the value [[This.rotation]]. You’d put this on top of your color wheel. Note that there is a do-nothing OnDrag interaction on the outer panel that just prevents you from dragging the image in the browser. Note: make sure the outer dynamic panel is NOT set …

A followup to that thread, adding “clockwise/counter-clockwise” directionality:

Circular Slider: clockwise or counter-clockwise?

Hi! Yes, when I dug up that rotating DP solution I started playing around with it and came up with two uses that necessitate knowing which direction you’re dragging. Basically, I create two “variables” (using widget text): one is called futureDirection and the other previousDirection. OnDrag, I set previousDirection to futureDirection and then set futureDirection to what atan2 gives me based on mouse position. If future direction is greater (taking the border condition into account), it’s bein…

[josephxbrick]

Hi!

I’m not sure what you mean by a list of hotspots, but you could to use the Rotated event for ‘rotatingPanel’ which is called constantly as that panel rotates. In it, set up some conditions based on the rotation, and do whatever you want when rotation is in a given range. Rotation goes clockwise from 0 to 360. Exampe;

On Rotated (of rotatePanel)
  If value [[This.rotation]] is greater than 0 
    AND value [[This.rotation]] is less than or equals 30
      -- do whatever you want here
  Else If value [[This.rotation]] is greater than 30
    AND value [[This.rotation]] is less than or equals 60
      -- do whatever you want here