Update property slide view

src/style_manager/view/PropertySliderView.js

@@ -11,13 +11,10 @@ export default Property.extend({
   },
 
   templateInput(model) {
-    const ppfx = this.ppfx;
+    const { ppfx } = this;
     return `
       <div class="${ppfx}field ${ppfx}field-range">
-        <input type="range"
+        <input type="range" min="${model.get('min')}" max="${model.get('max')}" step="${model.get('step')}"/>
-          min="${model.get('min')}"
-          max="${model.get('max')}"
-          step="${model.get('step')}"/>
       </div>
     `;
   },
@@ -31,23 +28,17 @@ export default Property.extend({
   },
 
   inputValueChanged() {
-    const model = this.model;
+    this.model.upValue(this.getSliderEl().value);
-    const step = model.get('step');
-    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.upValue(this.getSliderEl().value, { partial: true });
-    this.model.set('value', this.getInputValue(), { avoidStore: 1 });
-    this.elementUpdated();
   },
 
   setValue(value) {
-    const parsed = this.model.parseValue(value);
+    const { model } = this;
-    this.getSliderEl().value = parseFloat(parsed.value);
+    const parsed = model.parseValue(value);
+    this.getSliderEl().value = value === '' ? model.getDefaultValue() : parseFloat(parsed.value);
     Property.prototype.setValue.apply(this, arguments);
   },
 

src/style_manager/view/PropertyView.js

@@ -25,7 +25,7 @@ export default Backbone.View.extend({
       <span class="${pfx}icon ${icon}" title="${info}">
         ${label}
       </span>
-      ${!parent ? `<b class="${pfx}clear" ${clearProp}>&Cross;</b>` : ''}
+      ${!parent ? `<b class="${pfx}clear" style="display: none" ${clearProp}>&Cross;</b>` : ''}
     `;
   },