anujku/app.js

## app.js
var App = Em.Application.create();

App.ApplicationController = Em.ObjectController.extend({
  base:0,
  something1: 375,
  something2: 500

});

App.MyGaugeComponent = Em.Component.extend({
  classNames: ['gauge'],
  classNameBindings: ['isMaxValueExceeded:exceeded'],

  isMinValueExceeded: function(){
    var minValue = parseInt(this.get('minValue'), 10);
    var value = parseInt(this.get('value'), 10);
    var maxValue = parseInt(this.get('maxValue'), 10);
    return (minValue < 0) || (minValue > maxValue);
  }.property('minValue', 'value', 'maxValue'),

  isMaxValueExceeded: function(){
    var minValue = parseInt(this.get('minValue'), 10);
    var value = parseInt(this.get('value'), 10);
    var maxValue = parseInt(this.get('maxValue'), 10);
    return (value > maxValue);
  }.property('minValue', 'value', 'maxValue'),

  computedAngle: function(){
    var minValue = this.get('minValue');
    var value = this.get('value');
    var maxValue = this.get('maxValue');

    var percentValue = Math.floor( (value - minValue)/maxValue * 100 );
    var angle = Math.floor(180 * percentValue/100 - 90);
    var styles = ( this.get('isMaxValueExceeded') ) ?
                  '-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);' :
                  '-webkit-transform: rotate('+angle+'deg); -2moz-transform: rotate('+angle+'deg); -ms-transform: rotate('+angle+'deg); transform: rotate('+angle+'deg);';

    return styles;
  }.property('minValue','value', 'maxValue')
});

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Ember Gauge Component]" />
<meta charset=utf-8 />
<title>Ember Gauge Component</title>
<!--link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.3.4/css/semantic.min.css"-->
<link rel="stylesheet" href="style.css">
</head>
<body>

<script type="text/x-handlebars" id="application">
  <div class="form">
    <div class="ui input">
      <label>minValue</label>
      {{input type="text" value=base}}
    </div>

    <div class="ui input">
      <label>value</label>
      {{input type="text" value=something1}}
    </div>

    <div class="ui input">
      <label>maxValue</label>
      {{input type="text" value=something2}}
    </div>
  </div>

  {{my-gauge minValue=base value=something1 maxValue=something2}}

</script>

<script type="text/x-handlebars" id="components/my-gauge">
  <div class="frame">
    <div class="labels">
      <span class="min">{{minValue}}</span>
      <span class="max">{{maxValue}}</span>
    </div>
    <span class="pointer" {{bind-attr style="computedAngle"}}>
      <span class="pointer-cap"></span>
      <span class="value">{{value}}</span>
    </span>
  </div>

  {{#if isMaxValueExceeded}}
    <p class="value-exceeded">maxValue exceeded</p>
  {{/if}}
  {{#if isMinValueExceeded}}
    <p class="value-exceeded">minValue exceeded</p>
  {{/if}}
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0/ember.min.js"></script>
<script src="app.js"></script>

</body>
</html>

## style.css
.gauge {
  position:relative; width:100px; height:50px;
  border-radius:50px 50px 0 0;
  background:#41b7d8;
  -webkit-transition: background .3s;
     -moz-transition: background .3s;
      -ms-transition: background .3s;
          transition: background .3s;
}
.gauge .frame {
  height:50px;
}
.gauge .pointer {
  width:4px; height:90%; margin-left:-2px;
  position:absolute; z-index:1; bottom:0; left:50%;
  background:white; border-radius:4px;
  box-shadow:1px 1px 3px rgba(0,0,0,.3);

  -webkit-transition: -webkit-transform .3s ease 0s;
     -moz-transition:    -moz-transform .3s ease 0s;
      -ms-transition:     -ms-transform .3s ease 0s;
          transition:         transform .3s ease 0s;

  -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);

  -webkit-transform-origin: bottom;
     -moz-transform-origin: bottom;
      -ms-transform-origin: bottom;
          transform-origin: bottom;
}
.gauge .pointer .pointer-cap {
  width:16px; height:16px;
  margin-bottom:-8px; margin-left:-8px;
  position:absolute; bottom:0; left:50%;
  background:white; border-radius:100%;
  box-shadow:1px 1px 5px rgba(0,0,0,.3);
}
.gauge .pointer .value {
  width:60px; margin-left:-30px;
  position:absolute; top:-25px;
  font-size:10px; text-align:center;
}
.gauge .labels {
  width:100%;
  position:absolute; top:100%;
  font-size:10px; text-align:right;
}
.gauge .labels .min { float:left; }

.gauge.exceeded { background:red; }
.gauge.exceeded .value { color:red; }

.value-exceeded {
  width:100%;
  position:absolute; top:60px;
  font-size:11px; color:red; text-align:center;
}

html, body { margin:20px; font:14px/18px Arial; color:#666; background:#f1f1f1; }
.form { margin:30px 0; }
input { max-width:100px; }
label { display:block; }
	var App = Em.Application.create();

	App.ApplicationController = Em.ObjectController.extend({
	base:0,
	something1: 375,
	something2: 500

	});

	App.MyGaugeComponent = Em.Component.extend({
	classNames: ['gauge'],
	classNameBindings: ['isMaxValueExceeded:exceeded'],

	isMinValueExceeded: function(){
	var minValue = parseInt(this.get('minValue'), 10);
	var value = parseInt(this.get('value'), 10);
	var maxValue = parseInt(this.get('maxValue'), 10);
	return (minValue < 0) \|\| (minValue > maxValue);
	}.property('minValue', 'value', 'maxValue'),

	isMaxValueExceeded: function(){
	var minValue = parseInt(this.get('minValue'), 10);
	var value = parseInt(this.get('value'), 10);
	var maxValue = parseInt(this.get('maxValue'), 10);
	return (value > maxValue);
	}.property('minValue', 'value', 'maxValue'),

	computedAngle: function(){
	var minValue = this.get('minValue');
	var value = this.get('value');
	var maxValue = this.get('maxValue');

	var percentValue = Math.floor( (value - minValue)/maxValue * 100 );
	var angle = Math.floor(180 * percentValue/100 - 90);
	var styles = ( this.get('isMaxValueExceeded') ) ?
	'-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);' :
	'-webkit-transform: rotate('+angle+'deg); -2moz-transform: rotate('+angle+'deg); -ms-transform: rotate('+angle+'deg); transform: rotate('+angle+'deg);';

	return styles;
	}.property('minValue','value', 'maxValue')
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[Ember Gauge Component]" />
	<meta charset=utf-8 />
	<title>Ember Gauge Component</title>
	<!--link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.3.4/css/semantic.min.css"-->
	<link rel="stylesheet" href="style.css">
	</head>
	<body>

	<script type="text/x-handlebars" id="application">
	<div class="form">
	<div class="ui input">
	<label>minValue</label>
	{{input type="text" value=base}}
	</div>

	<div class="ui input">
	<label>value</label>
	{{input type="text" value=something1}}
	</div>

	<div class="ui input">
	<label>maxValue</label>
	{{input type="text" value=something2}}
	</div>
	</div>

	{{my-gauge minValue=base value=something1 maxValue=something2}}

	</script>

	<script type="text/x-handlebars" id="components/my-gauge">
	<div class="frame">
	<div class="labels">
	<span class="min">{{minValue}}</span>
	<span class="max">{{maxValue}}</span>
	</div>
	<span class="pointer" {{bind-attr style="computedAngle"}}>
	<span class="pointer-cap"></span>
	<span class="value">{{value}}</span>
	</span>
	</div>

	{{#if isMaxValueExceeded}}
	<p class="value-exceeded">maxValue exceeded</p>
	{{/if}}
	{{#if isMinValueExceeded}}
	<p class="value-exceeded">minValue exceeded</p>
	{{/if}}
	</script>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.0.0/ember.min.js"></script>
	<script src="app.js"></script>

	</body>
	</html>
	.gauge {
	position:relative; width:100px; height:50px;
	border-radius:50px 50px 0 0;
	background:#41b7d8;
	-webkit-transition: background .3s;
	-moz-transition: background .3s;
	-ms-transition: background .3s;
	transition: background .3s;
	}
	.gauge .frame {
	height:50px;
	}
	.gauge .pointer {
	width:4px; height:90%; margin-left:-2px;
	position:absolute; z-index:1; bottom:0; left:50%;
	background:white; border-radius:4px;
	box-shadow:1px 1px 3px rgba(0,0,0,.3);

	-webkit-transition: -webkit-transform .3s ease 0s;
	-moz-transition: -moz-transform .3s ease 0s;
	-ms-transition: -ms-transform .3s ease 0s;
	transition: transform .3s ease 0s;

	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);

	-webkit-transform-origin: bottom;
	-moz-transform-origin: bottom;
	-ms-transform-origin: bottom;
	transform-origin: bottom;
	}
	.gauge .pointer .pointer-cap {
	width:16px; height:16px;
	margin-bottom:-8px; margin-left:-8px;
	position:absolute; bottom:0; left:50%;
	background:white; border-radius:100%;
	box-shadow:1px 1px 5px rgba(0,0,0,.3);
	}
	.gauge .pointer .value {
	width:60px; margin-left:-30px;
	position:absolute; top:-25px;
	font-size:10px; text-align:center;
	}
	.gauge .labels {
	width:100%;
	position:absolute; top:100%;
	font-size:10px; text-align:right;
	}
	.gauge .labels .min { float:left; }

	.gauge.exceeded { background:red; }
	.gauge.exceeded .value { color:red; }

	.value-exceeded {
	width:100%;
	position:absolute; top:60px;
	font-size:11px; color:red; text-align:center;
	}

	html, body { margin:20px; font:14px/18px Arial; color:#666; background:#f1f1f1; }
	.form { margin:30px 0; }
	input { max-width:100px; }
	label { display:block; }