Range New

components.input-range\.js

import Component from '@glimmer/component';

export default class extends Component {
  update() {
  	console.log('foo');
  }
}

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object'; 

export default class ApplicationController extends Controller {
  @tracked start = 25;
	@tracked end = 75;

	@action setRangeValues([start, end]) {
  	this.start = start;
    this.end = end;
  }
}

modifiers.on-input-range\.js

import { modifier } from "ember-modifier";

export default modifier((element, [callback]) => {
  const rangeStart = element.querySelector('.range-start');
  const rangeEnd = element.querySelector('.range-end');
  const rangeWidth = element.offsetWidth;
  const thumbSize = 5;
  
  rangeStart.style.width = `${rangeWidth}px`;
  rangeEnd.style.width = `${rangeWidth}px`;

  function handleEvt(evt) {
    const startValue = parseInt(rangeStart.value);
    const endValue = parseInt(rangeEnd.value);
    
    // const startValue2 = Math.min(startValue,this.parentNode.childNodes[5].value-1);
    
    callback([startValue, endValue]);
    
  }

  document.addEventListener("input", handleEvt);

  return () => {
    document.removeEventListener("input", handleEvt);
  };
});


//var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);

  
  // rangeStart.style.width = `${rangeWidth / 2}px`;
  // rangeEnd.style.left = `${rangeWidth / 2}px`;

    // const startPercentage = ((startValue - rangeStart.min) / (rangeStart.max - rangeStart.min)) * rangeWidth;
    // const endPercentage = ((endValue - rangeEnd.min) / (rangeEnd.max - rangeEnd.min)) * rangeWidth;
     
    // const startWidth = rangeWidth / 100 * startPercentage;
    // const endWidth = rangeWidth / 100 * endPercentage;
    
    
    // rangeStart.style.width = `${startWidth}px`;
    // rangeEnd.style.width = `${endWidth}px`;
    
    // console.log(startPercentage, endPercentage);
    // console.log(max, min);


 // min.style.width = `${parseInt(
 //      thumbSize +
 //        ((splitValue - this.minRange) / (this.maxRange - this.minRange)) *
 //          (rangeWidth - 2 * thumbSize)
 //    )}px`;
 //    max.style.width = `${parseInt(
 //      thumbSize +
 //        ((this.maxRange - splitValue) / (this.maxRange - this.minRange)) *
 //          (rangeWidth - 2 * thumbSize)

styles.app\.css

@import "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css";

body{
	background: #F9FAFB;
}

.Input-Range input[type="range"]{
	-webkit-appearance: none;
  height: 3px;
}

.range-start{
  background: red;
}

.range-end{
  background: blue;
}

templates.application\.hbs

<main class="container mx-auto my-8 bg-gray-50">
	<InputRange
  	@startValue={{this.start}}
    @endValue={{this.end}}
    @doOnInputRange={{this.setRangeValues}}
  />
  
  {{this.start}} {{this.end}}
  
	{{outlet}}
</main>

templates.components.input-range\.hbs

<div class="Input-Range flex" {{on-input-range @doOnInputRange}}>
	<input type="range" min="0" max="100" step="1" class="range-start w-full">
  <input type="range" min="0" max="100" step="1" class="range-end w-full">
</div>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.18.0",
    "ember-truth-helpers": "3.0.0",
    "ember-modifier": "3.0.0"
  }
}