Ember Challenge Ranges

components.range-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  // This component is designed to take any range,
  // an area of variation between upper and lower
  // limits on a particular scale, and distill into
  // min/max variables
  
	// This component needs to take a string 
  // that can be parsed into an array
  // such as "[1,20]" and bind/convert 
  // respective min/max values
  
  // input values 
  from: function() {
    
  }.property('range'),
  
  to: function() {
    
  }.property('range'),
  
  _resetProperty: function() {
    
  }.observes('from', 'to'),
  
  // helpers
  _toArray: function(full_range) {
    return JSON.parse(full_range);
  },

  _toString: function(from,to) {
    return '[' + from + ',' + to + ']';
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['range'],
  appName: 'MAPC Ember Challenge',
  range: '[1,20]'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
QueryParams:
{{range}}
{{range-component range=range}}
<br>
<br>

templates.components.range-component.hbs

{{yield}}
To: {{input type="text" value=min}} <br/>
From: {{input type="text" value=max}} <br />
<br />
Computed Range: {{range}} <br/>
Type: {{typeof}}

twiddle.json

{
  "version": "0.10.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {}
}