Ember not setting range slider value

Question

In a form, in a table, I have...

<tr><td>Score (-10 to +10):</td><td>{{input type="range" min="-10" max="10" steps="1" value=game.score }}<br/>Score: {{game.score}}</td></tr>

This almost works; the correct value is reported below the slider, and any value set using the slider is stored correctly. But the slider is not initialized with the value correctly

Update: It looks like this is failing mostly for negative numbers!

. If I replace the binding name with a constant (e.g. "7"), that does initialize properly.

This looks like an Ember bug, in that this same format works for other input types and it does report it correctly; it's just the initialization that's wrong. But it seems kind-of big to be wrong, so there must be some secret magical incantation experienced users know, that I'm just ignorant of. How do I get this to initialize?

As mentioned above, this only seems to be a problem if game.score is negative. Very odd, as that works fine in HTML. The debugger shows this as: So I'm not seeing the default value, but this is the case regardless of it behaving correctly with a positive value. — TCat, Sep 16 '17 at 21:34

handlebears · Accepted Answer · 2017-09-16T23:25:26.230

The best way to handle a range slider in Ember is to use the native HTML implementation instead of the input helper. The input helper is only for text and checkboxes.

Option 1: handling the slider change with the mut helper:

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

In this example, as a slider gets moved, oninput fires. (onchange would fire only after the user releases the mouse). Then, the mut helper changes the value of game.score to be the value of the slider. target.value is normal HTML stuff, where target is the input dom element itself.

Option 2: use Ember's built-in event handlers

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

In your component js, add the input function:

import Ember from 'ember';

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

Here, event.target.value contains the value of the slider. The use of event listeners (instead of explicit actions) is a little uncommon, so if this surprises you, read the links at the bottom. Now that you have the value, you can call actions within the component, set some things, or send it up to a controller, etc.

Option 3: use a closure action

Closure actions (actions that are set equal to event names in the template) receive the event as a default argument.

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

In the component:

import Ember from 'ember';

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

Document these secret magical incantations well in your codebase. None are obvious at first glance.

It is very helpful to read the MDN docs on range inputs, the Ember docs for the mut helper, and Ember's supported event names.

That's great! I'd fought my way close to #1, but was using onchange (with the downside you described) and an action that resolved the value from the slider using var y = document.getElementById('scoreSlider'); ... not nearly as elegant. But seriously, why does it work with positive values without doing all this hooey? — TCat, Sep 16 '17 at 23:31

score 0 · Answer 2 · answered May 02 '18 at 16:20

A component like this works for me.

In components/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);
  }
});

Use it like this:

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

It seems to work nicely and is very simple.

Ember not setting range slider value

2 Answers2