Simple example of an template-less Ember component. Requires https://gist.github.com/kselden/7586144 to add min/max to input helper

color-rect.js

var ColorRectComponent = Ember.Component.extend({
  width: 100,
  height: 100,
  r: 0,
  g: 0,
  b: 0,

  color: function () {
    return 'rgb('+this.get('r')+','+this.get('g')+','+this.get('b')+')';
  }.property('r','g','b'),

  attributeBindings: ['style'],

  style: function () {
    return 'background-color:' +
      this.get('color')+'; width: '+
      this.get('width')+'px; height: '+
      this.get('height')+'px';
  }.property('color', 'width', 'height')
});

export default ColorRectComponent;

index.hbs

<p>
  red: {{input type="range" value=red min="0" max="255"}} {{red}}
</p>

<p>
  green: {{input type="range" value=green min="0" max="255"}} {{green}}
</p>

<p>
  blue: {{input type="range" value=blue min="0" max="255"}} {{blue}}
</p>

{{color-rect r=red g=green b=blue width="100" height="100"}}