Inverting JUCE Slider Values Without Inverting Interaction

Hello!

I am developing a custom class that inherits from JUCE’s vertical slider, and I want to invert the value mapping such that the maximum value is at the bottom and the minimum value is at the top. However, I want to keep the standard interaction behavior, meaning the slider should move up when I drag the mouse up and move down when I drag the mouse down.

When I implemented the value inversion, the interaction also got inverted, which is not what I want. The slider moves up when I drag the mouse down and vice versa. I want to maintain the normal interaction behavior while simply inverting the value mapping.

Solution I am Seeking:

I would like to know the best way to achieve this inversion of the value mapping while keeping the interaction direction consistent. Is there a straightforward way to flip the slider visually or handle this inversion without complicating the logic?

Things I’ve Tried So Far:

  • I thought maybe the mapping from the slider should be inverted, so I used setRange(12, -60);. That resulted in a jassert (end > start);, indicating that the end value must be greater than the start value. I don’t remember specifying it as a normalized range, unless this is assumed by default.
  • Then I thought, well, maybe if I just rotate the slider using an affine transform, that would achieve the same thing. Sure, I’d have to also rotate the image I’m using as the thumb, but whatever. However, I couldn’t get my interaction to work right either.

I’m beginning to think maybe there is no need to invert here in my custom slider class. Instead, maybe I can somehow invert the processing to perform a negative operation when a positive value is received? I don’t want to go this route as it seems like it would involve a lot of code changes.

Thank you for any advice or suggestions on how to properly invert the value mapping while maintaining the standard drag interaction. If there’s a better way to handle this in JUCE, I would love to learn about it.

Thank you!

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

Originally written for rotary, but works for linear as well (as confirmed by others in previous posts):

1 Like

This worked for me too. An elegant solution.
Thanks for the fast response, cheers!