Invert slider colours

[mashu]

I’m trying to do something that seems like it should be quite simple, but maybe isn’t.

I have 2 Juce sliders set to vertical slider mode, and I want one to have its colours inverted in respect to the other. One slider is for a highpass filter and the other for a lowpass, and they act in opposite directions so it seems fitting to make the GUI represent that.

Problem is that the background colour also gets inverted if I do that the way i tried so far (by just swapping Slider::ColourIds::backgroundColourId and Slider::trackColourId)

I’ve never looked into the lookAndFeel classes yet, and would prefer not to if possible as I only have so much time in the day and it’s not a huge priority.

Is there a simple way just to get a vertical slider with inverted colours?

I guess a simple hack is just to draw a rectangle around the sliders in my background colour…but would be nice if there’s a way to do it more elegantly.

[anon48770766]

lookAndFeel is how you do it. Take some time to get to know it. You’ll probably need to instantiate a sub-class of the slider component with your custom lookAndFeel just for that component …

[daniel]

@anon48770766

You’ll probably need to instantiate a sub-class of the slider component with your custom lookAndFeel just for that component …

That’s exactly what you don’t need. The LookAndFeel is there, so you don’t have to sub-class the Slider itself. This way the juce team can continue improving the slider without affecting your drawing code, because it is delegated to the LookAndFeel.

It seems easier to subclass the slider at first glance, but turns out to be a bad idea. Embrace the LookAndFeels.

class MyLookAndFeel : public juce::LookAndFeel_V4
{
public:
    MyLookAndFeel()=default;

    void drawLinearSlider (juce::Graphics &, 
                           int x, int y, int width, int height, 
                           float sliderPos, float minSliderPos, float maxSliderPos, 
                           const juce::Slider::SliderStyle, juce::Slider &) override
    {
        // copy here the code from LookAndFeel_V4::drawLinearSlider
        // and start modifying it until you are happy with the default
    }
};

// member:
MyLookAndFeel myLookAndFeel;

// in constructor:
slider.setLookAndFeel (&myLookAndFeel);

That’s all what’s needed

EDIT: just pointing out the obvious: Make sure the MyLookAndFeel instance is declared BEFORE the slider, otherwise it will lead to crashes either at start or at exit

[anon48770766]

Nice answer!