All values between two values

Question

I'm creating a UI for a battle system and I want the bar to go yellow every time the health drops below 50. So I used <<if $PlayerMorale <= 50>>. I also wanted the progress bar to go red when the health drops below 25 so I used <<if $PlayerMorale <=25>>. The first if also applies to the second one so the bar always stayed yellow. I figured out that I need to make a <<if $PlayerMorale is "Everything from 50 and 24">> But I didn't know how to do that. Is their a solution?

Html:

<<if $EnemyMorale <= 50>>\
<div style="text-align:right;">Enemy Morale: <span style="color: yellow;"><<print $EnemyMorale>></span>
<progress @value="$EnemyMorale" max="100" class="yellow"></progress></div>

<<elseif $EnemyMorale <= 25>>\
<div style="text-align:right;">Enemy Morale: <span style="color: red;"><<print $EnemyMorale>></span>
<progress @value="$EnemyMorale" max="100" class="red"></progress></div>

<<else>>\
<div style="text-align:right;">Enemy Morale: <span style="color: Green;"><<print $EnemyMorale>></span>
<progress @value="$EnemyMorale" max="100" class="green"></progress></div>

<</if>>\

<<if $PlayerMorale <= 50>>\
<div style="text-align:left;">Your Morale: <span style="color: yellow;"><<print $PlayerMorale>></span>
<progress @value="$PlayerMorale" max="100" class="yellow"></progress></div>

<<elseif $PlayerMorale <= 25>>\
<div style="text-align:left;">Your Morale: <span style="color: red;"><<print $PlayerMorale>></span>
<progress @value="$PlayerMorale" max="100" class="red"></progress></div>

<<else>>\
<div style="text-align:left;">Your Morale: <span style="color: green;"><<print $PlayerMorale>></span>
<progress @value="$PlayerMorale" max="100" class="green"></progress></div>

<</if>>\

Css:

.yellow {
  background: yellow;
}
.yellow::-webkit-progress-value {
  background: yellow;
}

.yellow::-moz-progress-bar {
  background: yellow;
}

.red {
  background: red;
}
.red::-webkit-progress-value {
  background: red;
}

.red::-moz-progress-bar {
  background: red;
}

.green {
  background: green;
}
.green::-webkit-progress-value {
  background: green;
}

.green::-moz-progress-bar {
  background: green;
}

 

Answer 1

Or you could simple change the order of the <<if>> related macros for each of the $EnemyMorale and $PlayerMorale  value checks.

<<if $EnemyMorale <= 25>>

<<elseif $EnemyMorale <= 50>>

<<else>>

<</if>>


<<if $PlayerMorale <= 25>>

<<elseif $PlayerMorale <= 50>>

<<else>>

<</if>>

... that way the <<elseif>> condition will only be true if the value is > 25 and <= 50, because the <<elseif>> check only occurs if the <<if>> condition returns false.