Three ways to build a range slider

components.option-0-built-in-helper.js

import Ember from 'ember';

export default Ember.Component.extend({
  sliderValue: 2,
  actions: {
  sliderUpdate(size) {
     // do something with size
   } 
  }
});

components.option-1-mut-slider.js

import Ember from 'ember';

export default Ember.Component.extend({
  min: 0,
  max: 10,
  sliderValue: 2
});

components.option-2-events-slider.js

import Ember from 'ember';

export default Ember.Component.extend({
  min: 0,
  max: 10,
  sliderValue: 2,
  input(event) {
  	this.set('sliderValue', event.target.value)
  }
});

components.option-3-closure-slider.js

import Ember from 'ember';

export default Ember.Component.extend({
  sliderValueA: 2,
  sliderValueB: 8,
  min: 0,
  max: 10,
  actions: {
  	sliderMovedImplicit(event) {
    	this.set('sliderValueA', event.target.value)
    },
    sliderMovedExplicit(val) {
    	this.set('sliderValueB', val)
    },
  }
});

controllers.application.js

import Ember from 'ember';

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

templates.application.hbs

<h1>Three ways to build a range slider</h1>
A demo for <a href="https-medium-com-jenweber-three-ways-to-build-a-range-slider-from-scratch-in-emberjs-18401eb3175d">this article</a>

<h2>Option 0: Use Ember's built-in input helper</h2>
{{option-0-built-in-helper}}

<h2>Option 1: Use the mut helper</h2>
{{option-1-mut-slider}}
<br>
<h2>Option 2: Use events</h2>
{{option-2-events-slider}}
<br>
<h2>Option 3: Use closure</h2>
{{option-3-closure-slider}}
<br>
<br>

templates.components.option-0-built-in-helper.hbs

{{input type='range' min=0 max=10 value=sliderValue mouseUp=(action 'sliderUpdate' sliderValue)}}
<div>
sliderValue: {{sliderValue}}
</div>

templates.components.option-1-mut-slider.hbs

<input type="range"
	oninput={{action (mut sliderValue) value="target.value"}}
	value={{sliderValue}} 
  min={{min}} 
  max={{max}} 
  step="1">
<br>
sliderValue: {{sliderValue}}

templates.components.option-2-events-slider.hbs

<input type="range" 
	value={{sliderValue}} 
  min={{min}} 
  max={{max}} 
  step="1">
  <br>
sliderValue: {{sliderValue}}

templates.components.option-3-closure-slider.hbs

<input type="range" 
	oninput={{action "sliderMovedImplicit"}}
	value={{sliderValueA}} 
  min={{min}} 
  max={{max}} 
  step="1">
<br>
sliderValueA: {{sliderValueA}}
<br>
<br>
<input type="range" 
	oninput={{action "sliderMovedExplicit" value="target.value"}}
	value={{sliderValueB}} 
  min={{min}} 
  max={{max}} 
  step="1">
 <br>
sliderValueB: {{sliderValueB}}

twiddle.json

{
  "version": "0.12.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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}