Awesome thanks!

Two approaches:

Cool thanks.

@Oot42

Is there a way to have if so if a negative value is entered the background bar goes red and fills?

The template:

https://sims.fandom.com/wiki/Template:RelationshipBar

I'm not exactly sure what you mean with "red and fills".

You mean any negative value leads to the whole bar turning red?

Basically, what was a green bar fill, on negative would be the same value but red. If that makes more sense.

For "friend" only? Or for "love" (pink) too?

And what about "enemy" (already red)?

I think just friend, not sure if love goes into the red or not. Friend/enemy will be redundant if + is green/friend/positive and - red/enemy/negative. So the default could be the green/red.

<div style="display:flex; height:10px; width:50px; border-radius:12px; overflow:hidden;">
<div style="width:{{#replace:{{{1|0}}}|-}}%; background: linear-gradient({{#switch: {{lc:{{{2|{{{type|}}}}}}}}
 |love     = #F7A4E0,#ED81C1
 |#default = {{#if:{{#pos:{{{1}}}|-}}|#DC334F,#B70C26|#96CF24,#4CAD40}}
}});"></div>
<div style="width:calc(100% - {{#replace:{{{1|0}}}|-}}%); background:grey;"></div>
</div>
<div style="margin-top:-5px; width:50px; text-align:center;"><small>{{{1|0}}}/100</small></div>

Also optimized the switch, made it case insensitive, and added the option to use "type" unnamed in parameter 2.

You are amazing! Thank you so much!