Range binding test

components.thingy-majigger.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  total: 20.0,
  current: 4.5,
  log: [],
  
  progress: Ember.computed('total', 'current', {
    get() {
      this.get('log').addObject('getting');
      let progress = this.get('current') / this.get('total');
      return progress || 0;
    },
    set(key, value) {
      this.get('log').addObject('setting');
      this.set('current', value * this.get('total'));
      let progress = this.get('current') / this.get('total');
      return progress || 0;
    }
  }),


});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{thingy-majigger}}
<br>
<br>

templates.components.thingy-majigger.hbs

<input class='time-slider' type='range' min='0' max='1' step='0.001' value={{mut progress}}>

<p>Current: {{current}}</p>
<p>Total: {{total}}</p>

<h4>Log:</h4>
<ul>
{{#each log as |message|}}
	<li>{{message}}</li>
{{/each}}
</ul>

twiddle.json

{
  "version": "0.4.8",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.9/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember-template-compiler.js"
  }
}