Anticlockwise Rotary Slider?



Hi All. I’m new to JUCE and trying to get to grips with some of the GUI elements. Sorry if this has been asked before but I couldn’t find it on a forum or Google search.

I have a rotary slider that goes from 0 to 360 without stop. So far so good. But… currently a positive angle is in a clockwise direction (90deg to the right, 270deg to the left, 180deg at the bottom). I need a positive angle to be in an anticlockwise direction (90deg to the left, 170deg to the right).

I’ve tried some things such as using setRotaryParameters() and modifying the start/end angles but it doesn’t seem to work as required.

Is there some easy way to do this that I am missing or will I have to write a new function inheriting?

Thanks in advance!


I need a rotary that drew from the middle, something similar might work for you:

slider->getProperties().set ("fromCentre", true);

Then in my LookAndFeel drawRotarySlider I did this:

if (slider.getProperties().contains ("fromCentre"))
    rotaryStartAngle = (rotaryStartAngle + rotaryEndAngle) / 2;

Instead you could try setting rotaryStartAngle to rotaryEndAngle after you’ve draw the bar


Perhaps use Slider::getValueFromText() and Slider::getTextFromValue() to simply invert the way that the range is rendered to the label?

If you start changing the LookAndFeel to invert the rotation that corresponds with higher numbers you may then find that all the mouse drags are less than intuitive.


class Slider_reverse : public JUCE_NAMESPACE::Slider
	Slider_reverse (const String& componentName): JUCE_NAMESPACE::Slider(componentName) {};
	~Slider_reverse() {};
	double proportionOfLengthToValue (double proportion) {   return JUCE_NAMESPACE::Slider::proportionOfLengthToValue(1.0f-proportion);};
	double valueToProportionOfLength (double value) {   return 1.0f-(JUCE_NAMESPACE::Slider::valueToProportionOfLength(value)); };


Nice! but don’t forget to override the virtual functions :slight_smile:

double proportionOfLengthToValue (double proportion) override { ...
double valueToProportionOfLength (double value) override { ...


Thanks so much for the advice here. I will try to implement it soon.

I guess I just need to include the new Slider_reverse class and add it as in the tutorials. One question, is it possible to use custom GUI components like this along with the GUI editor in Projucer?


I managed to get the reverse slider working perfectly and even included @G-Mon’s drawing from the centre.

Thanks so much to everyone!