Slider::IncDecButtons Appearance, Possition

Hello, I’m now trying to change the way of painting these buttons:
imagen

I cant find information about customization of the Increment / Decrement buttons of the “Slider::IncDecButton” Class.

Does anyone did this before?

I also can’t understand why the name of the parameter dont show, as on the other two buttons. This is the chunk of code. Thank you very much in advance!

constructor: // compDegree is the name of the button

addAndMakeVisible(compDegree);
	compDegree.setSliderStyle(Slider::IncDecButtons);
	Range<double>* r = new Range<double>(0.0, 5.0);
	double newInterval = 1.0;
	compDegree.setRange(*r, newInterval);
	compDegree.setEnabled(true);
	compDegreeAttachment.reset(new SliderAttachment(parameters, "compDegree", compDegree));
	compDegree.setTextValueSuffix("Compression Level");

paint function:

void SimpleCompressorAudioProcessorEditor::paint(Graphics& g)
{
	auto bounds = getLocalBounds();
	
	g.fillAll(getLookAndFeel().findColour(ResizableWindow::backgroundColourId));

	g.setColour(Colours::yellowgreen);
	g.setFont(15.0f);

	g.drawFittedText("title of the aplication not in the image", bounds.removeFromTop(50), Justification::centred, 1);

	auto labelRow = bounds.removeFromBottom(12);

	g.setFont(10.0f);
	g.drawFittedText("Threshold", labelRow.removeFromLeft(60), 12, Justification::centred, 1);
	labelRow.removeFromLeft(8);
	g.drawFittedText("Knee", labelRow.removeFromLeft(60), 12, Justification::centred, 1);
	labelRow.removeFromLeft(8);
	g.drawFittedText("Attack", labelRow.removeFromLeft(60), 12, Justification::centred, 1);
	labelRow.removeFromLeft(8);
	g.drawFittedText("Release", labelRow.removeFromLeft(60), 12, Justification::centred, 1);
	labelRow.removeFromLeft(8);
	g.drawFittedText("Ratio", labelRow.removeFromLeft(60), 12, Justification::centred, 1);
	labelRow.removeFromLeft(8);
	g.drawFittedText("MakeUp", labelRow.removeFromLeft(60), 12, Justification::centred, 1);

}

For customizing the increment/decrement buttons, you should be able to create a LookAndFeel class that overrides createSliderButton(), and use setLookAndFeel() to apply it to your Slider object.

Btw, you’re leaking memory in the constructor here:

Range<double>* r = new Range<double>(0.0, 5.0);
double newInterval = 1.0;
compDegree.setRange(*r, newInterval);

When you call setRange(), the Range object is passed by value. So the setRange() function gets its own copy of the range object, and the one created in your constructor never gets deleted. You can instead just do:

compDegree.setRange (Range<double> (0.0, 5.0), 1.0);

Which allocates the Range object on the stack, so it is deleted automatically when it goes out of scope. Generally, you should prefer to allocate objects on the stack instead of the heap (especially lightweight objects like Ranges that are cheap to copy).

1 Like

What sucks though is that the buttons are laid out by the slider. Try putting the minus left and the plus right if the text input. IMHO there’s a L&F method missing to do this.

1 Like

Yeah, there’s the getSliderLayout() L&F method for basic layout tweaks, but it’s limited to specifying two rectangles: one for the text box, and one for the slider itself (or in this case, the buttons).

It would be nice to have a L&F method like getIncDecSliderLayout(), since the IncDecButton layout is just a bit more nuanced than what the generic SliderLayout represents, but I can see how that might be tricky given the variety of styles supported…

See also: IncDecButton Layout: Am I overthinking this?