range input

components.range-input.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['range-input-container'],
  style: Ember.computed('max', 'min', 'value', function () {
    let { max, min, value } = this;
    
    let width = (max - min) * value * 0.9;
    
    return `margin-left: ${width}%;`;
  }),
  
  click(event) {
    console.log(`event ${event.originalEvent.pageX}`);
    let { pageX } = event.originalEvent;
    let { max, min } = this;
    // range is between 17 and 115
 
    let percentage = (pageX - 14) / 100;
    let newValue = Math.floor(percentage * (max - min));

    console.log(`pageX${pageX} new value ${newValue}`);
    this.set('value', newValue);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  value: 5,
  
  actions: {
    rangedChanged(value) {
      console.log('range change ' + value);
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.range-input-container {
  width: 100px;
}
.range-input {
  width: 100px;
  height: 10px;
  background-color: grey;
  position: relative;
}

.range-input .notch {
    height: 10px;
    width: 10px;
    background-color: yellow;
    border-radius: 50%;
    z-index: 2;
  }
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
Value: {{this.value}}
<br>
<RangeInput @min={{0}} @max={{10}} @value={{value}} />
<br>
<br>

templates.components.range-input.hbs

<div class="range-input">
  <div class="notch" style={{this.style}}>
   &nbsp;
  </div>
</div>

tests.integration.components.range-input-test.js

import { module, test, setupRenderingTest } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { click } from '@ember/test-helpers';

module('range-input', function(hooks) {
  setupRenderingTest(hooks);
  
test('it renders', async function(assert) {

  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.on('myAction', function(val) { ... });

  this.setProperties({
    min: 0,
    max: 10,
    value: 5
  });
  await this.render(hbs`<RangeInput @min={{this.min}} @max={{this.max}} @value={{this.value}} />`);
  
  assert.ok(document.querySelector('.notch'));
  let notch = document.querySelector('.notch');
  assert.equal(notch.style['margin-left'], '45%', 'margin-left set on notch to show value');
  
  await click('.range-input');

});
  
});

tests.test-helper.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { start } from 'ember-qunit';
import { assign } from '@ember/polyfills';

let attributes = assign({ rootElement: '#main' }, config.APP);
setApplication(Application.create(attributes));

start();

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}