diff --git a/addon/components/paper-slider.js b/addon/components/paper-slider.js index b651bfc41..c73905793 100644 --- a/addon/components/paper-slider.js +++ b/addon/components/paper-slider.js @@ -48,10 +48,6 @@ export default Component.extend(FocusableMixin, ColorMixin, { .on('panend', run.bind(this, this._dragEnd)); }, - trackContainer: computed(function() { - return this.$('.md-track-container'); - }), - activeTrackStyle: computed('percent', function() { let percent = this.get('percent') || 0; return htmlSafe(`width: ${percent * 100}%`); @@ -74,7 +70,8 @@ export default Component.extend(FocusableMixin, ColorMixin, { }), positionToPercent(x) { - return Math.max(0, Math.min(1, (x - this.get('sliderDimensions.left')) / this.get('sliderDimensions.width'))); + let { left, width } = this.sliderDimensions(); + return Math.max(0, Math.min(1, (x - left) / width)); }, percentToValue(x) { @@ -98,16 +95,19 @@ export default Component.extend(FocusableMixin, ColorMixin, { dragging: false, enabled: computed.not('disabled'), - sliderDimensions: computed(function() { - return this.get('trackContainer')[0].getBoundingClientRect(); - }), + sliderDimensions() { + return this.$('.md-track-container').get(0).getBoundingClientRect(); + }, + + click(event) { + this.setValueFromEvent(event); + }, setValueFromEvent(event) { - // let exactVal = this.percentToValue(this.positionToPercent(event.deltaX || event.clientX)); let exactVal = this.percentToValue(this.positionToPercent(event.clientX || event.srcEvent.clientX)); let closestVal = this.minMaxValidator(this.stepValidator(exactVal)); - this.set('value', closestVal); + this.sendAction('onChange', closestVal); }, _dragStart(event) { @@ -119,8 +119,6 @@ export default Component.extend(FocusableMixin, ColorMixin, { this.set('dragging', true); this.$().focus(); - this.get('sliderDimensions'); - this.setValueFromEvent(event); }, @@ -163,7 +161,7 @@ export default Component.extend(FocusableMixin, ColorMixin, { newValue = this.get('value') + changeAmount; - this.set('value', this.minMaxValidator(newValue)); + this.sendAction('onChange', this.minMaxValidator(newValue)) event.preventDefault(); event.stopPropagation(); diff --git a/tests/dummy/app/templates/demo/slider.hbs b/tests/dummy/app/templates/demo/slider.hbs index d9b2854d0..d78af4e13 100644 --- a/tests/dummy/app/templates/demo/slider.hbs +++ b/tests/dummy/app/templates/demo/slider.hbs @@ -15,19 +15,19 @@
@@ -36,33 +36,33 @@