Tabbed Component Becomes a Slider but Slider Should be Placed in Tab

So I’m currently trying to create a Tabbed Component that contains a slider inside but when I make reference to the slider inside the tab it makes the whole tab a slider? Even though i’ve set the bounds of the slider in ‘resize’.

Here’s snippets of the code. Please help me overcome this problem.

Animal_generator_krotosAudioProcessorEditor::Animal_generator_krotosAudioProcessorEditor(Animal_generator_krotosAudioProcessor& p)
AudioProcessorEditor (&p),
processor (p),
    // Make sure that before the constructor has finished, you've set the
    // editor's size to whatever you need it to be.
    setSize (600, 600);
    m_triggerComponent.addTab("Trigger" , juce::Colours::red, &m_gain, false);
    m_triggerComponent.addTab("Controller" , juce::Colours::black, &m_aggression, false);
    m_aggression.setSliderStyle (Slider::LinearBar);
    m_aggression.setRange(100.0, 6000.0, 0.10);
    m_aggression.setTextBoxStyle (Slider::NoTextBox, false, 90, 0);
    m_aggression.setPopupDisplayEnabled (true, this);
    m_aggression.setTextValueSuffix ("aggression");
    addAndMakeVisible (&m_aggression);
    m_aggression.addListener (this);


 void Animal_generator_krotosAudioProcessorEditor::resized()
    m_triggerComponent.setBounds(0, 0, getWidth(), getHeight());
    m_aggression.setBounds (40, 11*getHeight()/16, getWidth()- 80, 20);

It’s quite hard to tell without seeing more of your code but I’m assuming that the m_triggerComponent object inherits from TabbedComponent and you want that to display a slider in one of its tabs? If so, then you shouldn’t be adding your m_aggression Slider object as a child component of your editor as well as adding it to the TabbedComponent. A better way to do this would be to have another component that contains the slider object and then add this component as a tab in the TabbedComponent instead. Take a look at the DemoTabbedComponent class in the JUCE Demo project for a good guideline on how to use TabbedComponents.

Yeah that’s exactly what I’m trying to do.

Could you write a simple example of what you mean. I have had a look at the DemoTabbedComponent class in the JUCE demo and find it quite hard to follow. I’m just looking to see a simple example of a slider placed within a tab if possible?

OK, here’s a very simple example of a TabbedComponent containing a tab with just a slider in:

class MainContentComponent   : public Component
    MainContentComponent() : tabs (TabbedButtonBar::Orientation::TabsAtTop)
        addAndMakeVisible (tabs);
        tabs.addTab ("Blank", Colours::hotpink, new Component(), true);
        tabs.addTab ("Slider", findColour(ResizableWindow::ColourIds::backgroundColourId), new SliderHolder(), true);
        setSize (600, 400);

    ~MainContentComponent() {}
    void paint (Graphics&) override {}
    void resized() override
        tabs.setBounds (getLocalBounds().reduced (20));

    TabbedComponent tabs;

    struct SliderHolder    : public Component
            addAndMakeVisible (slider);
        void resized() override
            slider.centreWithSize (getWidth() - 40, 150);
        Slider slider;


Hope this helps!

1 Like

Thank you very much ed95! That’s the kind of example I needed to get my head around it all! Could follow that no problem! Managed to get what I wanted to work! Thanks again!