What Ember Add-on do I need for this situation?

Question

I am wondering if there is an ember add-on that I can implement to do the following.

|-----------------------------------------------v----|
green                 yellow                      red

Color gradient bar of green > yellow > red and the v represents a value that lands there. Also where green, yellow, red start is based on values, so green could be 0-20 and yellow 21-40 and red 41+

I don't know what something like this would be called, but if anyone can let me know and help point me in the right direction, I would be much obliged.

Answer 1

Here you go:

var min = 0;
var max = 60;

function set(x) {
  var left = (x - min) / (max - min) * 100;
	document.getElementById("V").style.left = left + "%";
}

set(50);

#gauge {
  background: linear-gradient(to right, green 0%, yellow 50%, red 100%);
  height: 2em;
  position: relative
}

#V {
  width: 0;
  height: 2.4em;
  border: 1px solid black;
  position: absolute;
  top: -0.2em
}

<div id="gauge">
  <div id="V"></div>
</div>