How do I create an interactive bar?

Hi,

Im kinda stuck on a project.

Im working on a small power plant based game for my website.

I've got the bar ready to show how much power there is. You can add power by pressing up/down buttons at the generators.

But now i want a bar that comes from both sides to show the balance between green and grey energy.

I tried to add the same bar but with 2 sprites from either side. But they keep overlapping or keep adding to the total power bar.

What would be the best way to solve this issue?

It is not very clear to me from your description what you've tried or how you want the result to be exactly.

I kinda made an health bar to show the max power.

But now i want to add something like an "healthbar" but that comes from 2 sides. To show the balance between green energy and grey energy.

But the problem is that the "healthbars" keeps overlapping each other in the middle.

And they also keep adding to the max power "healthbar"