Ember не устанавливает значение ползунка диапазона

Лучший способ обработки ползунка диапазона в Ember — использовать нативную реализацию HTML вместо помощника ввода. Помощник ввода предназначен только для текста и флажков.

Вариант 1: обработка изменения ползунка с помощью помощника mut:

<input type="range" 
    oninput={{action (mut game.score) value="target.value"}} 
    min={{min}} 
    max={{max}} 
    value={{game.score}} 
    steps="1">

В этом примере при перемещении ползунка срабатывает oninput. (onchange сработает только после того, как пользователь отпустит кнопку мыши). Затем помощник mut изменяет значение game.score на значение ползунка. target.value — это обычный материал HTML, где target — это сам входной элемент dom.

Вариант 2: используйте встроенные обработчики событий Ember

<input type="range" 
    min={{min}} 
    max={{max}} 
    value={{game.score}} 
    steps="1">

В вашем компоненте js добавьте функцию ввода:

import Ember from 'ember';

export default Ember.Component.extend({
  input(event) {
    console.log(event.target.value)
  }
});

Здесь event.target.value содержит значение ползунка. Использование прослушивателей событий (вместо явных действий) немного необычно, поэтому, если это вас удивляет, прочитайте ссылки внизу. Теперь, когда у вас есть значение, вы можете вызывать действия внутри компонента, устанавливать некоторые параметры или отправлять их контроллеру и т. д.

Вариант 3: используйте действие закрытия

Действия закрытия (действия, равные именам событий в шаблоне) получают событие в качестве аргумента по умолчанию.

<input type="range" 
  oninput={{action 'sliderMoved'}} 
  min={{min}} 
  max={{max}} 
  value={{game.score}}
  steps="1">

В компоненте:

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    sliderMoved(e) {
      console.log(e.target.value)
      // do something with the value
    }
  }
});

Хорошо задокументируйте эти секретные магические заклинания в своей кодовой базе. Ни один из них не очевиден на первый взгляд.

Очень полезно прочитать документацию MDN при вводе диапазона документы Ember для помощник mut и поддерживаемый Ember имена событий.

Такой компонент мне подходит.

В компонентах/range-slider/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  attributeBindings: ['value', 'min', 'max', 'step', 'type'],
  type: 'range',
  value: 0.5,
  min: 0.0,
  max: 1.0,
  step: 0.1,
  input(event) {
    this.set('value', event.target.value);
  }
});

Используйте это так:

{{range-slider value=my_value min=0.0 max=0.5 step=0.001}}

Кажется, это работает хорошо и очень просто.