Update slider property in style manager

GrapesJS · Oct 26, 2017 · 43c0a34 · 43c0a34
1 parent 17f850a
commit 43c0a34
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git 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
@@ -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();
   },