How about to add this type of button?


I guess someone of JUCE team will certainly saying:

we’re happy to take a look at pull requests and potentially merge them in if they’re useful features.


That is a simple ToggleButton with a custom look and feel.

Related thread: Three Position Switch


It’s probably about 15 lines of code if you inherit Button and override paintButton(). Might be simpler than fussing around with LookAndFeel.

1 Like

No, gentlemen. I’m not willing to discuss how to implement this type of button. in fact, a simple juce::ImageButton will do.

I mean, it seems not worth to waste time to make the wheel, espeilaly this common button on iOS and Android. If everything should be made by oneself, why do we spend time and money on a UI framework/library?

We use JUCE because it’s awesome, and so easy to build up a library of our own classes to do what we want. It’s called a framework for a reason. As you said, a simple ImageButton provides this, no new code, just two images. Button it up (pun intended) in your own module, and have it available to all of your apps. This is how I have used JUCE for years, and I never feel like I’m wasting time, or money. As well, being overly dramatic ‘if everything should be made by oneself’ certainly doesn’t support your request in any way.

1 Like

An image doesn’t scale as well as drawing a rounded rectangle and then a circle on the left or right. You could even animate it with a few lines of code.


So strange values… Just 2 images or even one line also is waste time, understand?
You never feel wasting time, perhaps time is worth nothing for you and demand of your users, hehe~

Certainly, ROLI and JUCE team love these answers of yours. Hope they will send you a big red-envelope at the end of the year :smiley:


I don’t know if there’s a tidier solution? But this looks pretty sexy to me. It might want a disabled state and a mouse over effect depending on how it’s going to be used.

class AnimatedToggleSlider : public Button, Timer
	AnimatedToggleSlider () : Button({}) { setClickingTogglesState(true); }

	void buttonStateChanged () override { startTimer(30); }

	void timerCallback() override
		auto rate = 0.1f;
		rate *= getToggleState() ? 1.0f : -1.0f;

		position = jlimit(0.0f, 1.0f, position + rate);

		if (position == 0.0f || position == 1.0f)


	void paintButton (Graphics& g, bool isMouseOverButton, bool isButtonDown) override
		auto h = float(getHeight());
		auto area = getLocalBounds().toFloat();

		Path p;  // leaving as a path so an optional outline can be added
		p.addRoundedRectangle(area, h / 2.0f);
		g.setColour(Colours::darkgrey.interpolatedWith(Colours::green, position * position));

		auto circleBounds = area.withWidth(h).translated((area.getWidth() - h) * position, 0.0f);

	float position{ 0.0f };

Thanks, jimc. You’re a great pioneer :slight_smile:

Still hope the superior JUCE team will add this common button to the library…


I’ve become obsessed … better go for some lunch instead of making widgets :slight_smile:

1 Like

Sincerely invite you to come to my country when you have free time, jimc. I will entertain you with the best delicacy in the world :smiley:

No, I don’t understand. As a software engineer of 30 years I find your attitude a bit whiny. You ARE requesting an ImageButton with baked in images, do you understand?



      ...20 words...

Now you’re just being rude and immature. Best of luck.

拉倒吧, cpr。看你也一把年纪的人了,实在不想打击你。


Dude, chill out. Your behavior continues to be inappropriate for the JUCE message board. Feel free to continue to insult me with private messages, but respect the other users of this message board and stop posting this stuff in the thread.

@loopfine: this is not KVR. Please stop it.


you should give this words to cpr, not me. understand?