analytics/webcontent/bi/js/dashboard-analytics/features/widget/conditionalFormatting/properties/ColourRange.html

<div class="conditional-formatting-colour-range property_{{!it.id}}" aria-label="{{!it.ariaLabel}}">
	<div class="box-container">
		<div class="box-inner-container">
			{{~it.items :item:index}}
				<div class="box" style="background-color:{{!item.color}};" data-index="{{=index}}" tabindex="0">&nbsp;</div>
			{{~}}
		</div>
	</div>
	<div class="label-container">
		{{~it.items :item:index}}
			{{? index === 0}}
				<div class="end-box box-label" style="width:20%" title="{{!item.start_label}}">
						{{!item.start_label}}
				</div>
				<div class="padding" style="width:{{!it.paddingWidth}}"></div>
				{{? index === it.stepCount-1}}
					<div class="padding" style="width:{{!it.paddingWidth}}"></div>
					<div class="end-box box-label" style="width:20%" title="{{!item.end_label}}">
							{{!item.end_label}}
					</div>
				{{??}}
					<div class="box-label-normal box-label" title="{{!item.end_label}}">{{!item.end_label}}</div>
				{{?}}
			{{?? index === it.stepCount-1}}
				<div class="padding" style="width:{{!it.paddingWidth}}"></div>
				<div class="end-box box-label" style="width:20%" title="{{!item.end_label}}">
						{{!item.end_label}}
				</div>
			{{??}}
				<div class="box-label-normal box-label" title="{{!item.end_label}}">
					{{!item.end_label}}
				</div>
			{{?}}
		{{~}}
	</div>
</div>