Ember + rangeslider.js by andreruffert

ember-rangeslider.js

/**
 * Extend {{input}} to support html5 range.
 *  Example: {{input type="range" value=myProperty max="500"}}
 *  Uses rangeslider.js plugin for IE9 support and to look pretty
 *  Fires optional onInit, onSlide, and onSlideEnd events
 */
Ember.TextSupport.reopen({
    attributeBindings: ['min', 'max', 'step'],
    initRangeSlider: function() {
        if (this.get('type') === 'range') {
            var self = this;
            self.$().rangeslider({
                polyfill: false,
                onInit: function() {
                    self.sendAction('onInit');
                },
                onSlide: function(position, value) {
                    self.set('value', value);
                    self.sendAction('onSlide', position, value);
                },
                onSlideEnd: function(position, value) {
                    self.set('value', value);
                    self.sendAction('onSlideEnd', position, value);
                }
            });
        }
    }.on('didInsertElement'),
    removeRangeSlider: function() {
        this.$().rangeslider('destroy');
    }.on('willDestroyElement')
});