Creating a new model in ember with a zurb foundation range slider bound to an attribute

I am trying to use the range slider from the zurb foundation framework with Ember. I want a slider next to an input field, both of them showing the same value updating each other so a user would be able to enter either a number by hand or use the slider to set a score for a game played in the past.

My template looks like this:

{{input type="text" id="new-game-score" value=newGameScore}}
<div class="range-slider" data-slider={{newGameScore}} data-options="start: 0; end: 16;">
  <span class="range-slider-handle" tabindex="0" role="slider"></span>
  <span class="range-slider-active-segment"></span>
</div>

And in the controller I'm calling this.get('newGameScore'); to get the value for the creation of the model.

When I open the template I get a text-input that behaves like I expect. It allows to set the score for the creation of the model. The data-slider-attribute of the slider next to it gets updated correctly, but it doesn't change how the slider looks and I can't move the slider at all. When I set newGameScore as a function returning a number in the controller both the slider and the input field start out with the set value and I can move the slider. Moving it does not change the value of the input field though, while entering a number in the text field adjusts the data-slider-value without any visible change on the slider. The number used for the creation of the new model is the one from the text input.

I'm using ember-cli and installed foundation with ember install ember-cli-foundation-sass. I have

var app = new EmberApp({
  'ember-cli-foundation-sass': {
    'modernizr': true,
    'fastclick': true,
    'foundationJs': 'all'
  }
});

in my Brocfile and the corresponding view looks like this:

export default Ember.View.extend({
  didInsertElement: function() {
    this.$().foundation();
  }
});

The controller is an ArrayController with the template showing all the games with their scores. I would like to keep at that way if possible.

I started out using the zurb foundation documentation: http://ift.tt/1pLQ9tO

and found the following solution to a more complicated but closely related problem: http://ift.tt/1dwuK6V

but I couldn't figure out how to properly synchronise the slider with newGameScore. http://ift.tt/1dwuK6V states at the beginning of the article that ember with a foundation-slider is easy to do. So I assume I don't have to write custom on-change-functions to solve my problem, but maybe someone more experienced with ember can find a solution from bottom part of the article, although it seemed to me that this is only needed for the combination of the dropdown and the slider.

Thanks for reading and for any idea about this. regards, Andy