diff --git a/src/style_manager/view/PropertySliderView.js b/src/style_manager/view/PropertySliderView.js index 0124dee8a..4de4bac50 100644 --- a/src/style_manager/view/PropertySliderView.js +++ b/src/style_manager/view/PropertySliderView.js @@ -3,10 +3,11 @@ const Property = require('./PropertyIntegerView'); module.exports = Property.extend({ events: { - 'change': 'inputValueChanged', - 'input': 'inputValueChangedSoft', + 'change [type=range]': 'inputValueChanged', + 'input [type=range]': 'inputValueChangedSoft', }, + templateInput(model) { const ppfx = this.ppfx; return ` @@ -19,6 +20,7 @@ module.exports = Property.extend({ `; }, + getSliderEl() { if (!this.slider) { this.slider = this.el.querySelector('input[type=range]'); @@ -27,32 +29,34 @@ module.exports = Property.extend({ return this.slider; }, + inputValueChanged() { const model = this.model; const step = model.get('step'); - console.log('slider ', this.getSliderEl().value, ' input', this.getInputEl().value); this.getInputEl().value = this.getSliderEl().value; const value = this.getInputValue() - step; model.set('value', value, {avoidStore: 1}).set('value', value + step); this.elementUpdated(); }, + inputValueChangedSoft() { this.getInputEl().value = this.getSliderEl().value; this.model.set('value', this.getInputValue(), {avoidStore: 1}); this.elementUpdated(); }, + setValue(value) { this.getSliderEl().value = value; this.inputInst.setValue(value, {silent: 1}); }, + onRender() { Property.prototype.onRender.apply(this, arguments); - const model = this.model; - if (!model.get('showInput')) { + if (!this.model.get('showInput')) { this.inputInst.el.style.display = 'none'; } } diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index accf729ec..1ae196be8 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -151,7 +151,8 @@ module.exports = Backbone.View.extend({ * Triggers when the value of element input/s is changed, so have to update * the value of the model which will propogate those changes to the target */ - inputValueChanged() { + inputValueChanged(e) { + e.stopPropagation(); this.model.set('value', this.getInputValue()); this.elementUpdated(); },