if / else DIV Container for Numeric Range

• MrThiemann

• November 11, 2019 at 4:01 am

hey community,

I have a field type “Numeric Range” with values from 1 to 8

I would like to output this in the form of “indicatorTicOn / indicatorTicOff”.

Example:
Value = 1

<div class="indicatorTicOn"></div>
<div class="indicatorTicOff"></div>
<div class="indicatorTicOff"></div>
<div class="indicatorTicOff"></div>
<div class="indicatorTicOff"></div>
<div class="indicatorTicOff"></div>
<div class="indicatorTicOff"></div>
<div class="indicatorTicOff"></div>

Value = 5

<div class="indicatorTicOn"></div>
<div class="indicatorTicOn"></div>
<div class="indicatorTicOn"></div>
<div class="indicatorTicOn"></div>
<div class="indicatorTicOn"></div>
<div class="indicatorTicOff"></div>
<div class="indicatorTicOff"></div>
<div class="indicatorTicOff"></div>

etc … from 1 to 8

The DIV containers are then assigned a style in style.css
Example:

.indicatorTicOff {
    background-color: #E2E7EC;
}
.indicatorTicOn {
    background-color: #FF810F;
}
.indicatorTicOn, .indicatorTicOff {
    width: 10px;
    height: 13px;
    border-radius: 2px;
    margin-left: 0px;
    display: inline-block;
}

Can someone help me with the implementation?