An Ember JS Gauge Component

TL;DR

This is a gauge (well kind of) made with Ember Components and CSS3 transforms. The pointer angle is bound to those 2 inputs (see the jsbin just bellow) in which you can define either the pointer current value and the whole gauge maximum value.

The Template

The main idea of having a gauge component is that you can use and re-use it anywhere in your Ember app(s), and its main purpose is to indicate a current value relative to a maximum value. So, if it could have 2 attributes value and maxValue that would be perfect.

Well, let’s just do that.

{{my-gauge value=something maxValue=something}}
Continue reading “An Ember JS Gauge Component”