Update slider property

index.html

@@ -1041,6 +1041,7 @@
           properties: [{
             type: 'slider',
             property: 'opacity',
+            defaults: 1,
             step: 0.01,
             max: 1,
             min:0,

src/style_manager/view/PropertyIntegerView.js

@@ -2,13 +2,8 @@ const InputNumber = require('domain_abstract/ui/InputNumber');
 
 module.exports = require('./PropertyView').extend({
 
-  template(model) {
+  templateInput() {
-    const pfx = this.pfx;
+    return '';
-    return `
-      <div class="${pfx}label">
-        ${this.templateLabel(model)}
-      </div>
-    `;
   },
 
   init() {
@@ -22,13 +17,16 @@ module.exports = require('./PropertyView').extend({
   },
 
   onRender() {
+    const ppfx = this.ppfx;
+
     if (!this.input) {
       const inputNumber = new InputNumber({
         model: this.model,
         ppfx: this.ppfx
       });
       const input = inputNumber.render();
-      this.$el.append(input.$el);
+      const fields = this.el.querySelector(`.${ppfx}fields`);
+      fields.appendChild(input.el);
       this.$input = input.inputEl;
       this.$unit = input.unitEl;
       this.input = this.$input.get(0);

src/style_manager/view/PropertySliderView.js

@@ -1,37 +1,24 @@
 const InputNumber = require('domain_abstract/ui/InputNumber');
 
-module.exports = require('./PropertyView').extend({
+module.exports = require('./PropertyIntegerView').extend({
 
   events: {
     'change': 'inputValueChanged',
     'input': 'inputValueChangedSoft',
   },
 
-  template(model) {
+  templateInput(model) {
-    const pfx = this.pfx;
     const ppfx = this.ppfx;
     return `
-      <div class="${pfx}label">
+      <div class="${ppfx}field ${ppfx}field-range">
-        ${this.templateLabel(model)}
+        <input type="range"
-      </div>
+          min="${model.get('min')}"
-      <div class="${ppfx}fields">
+          max="${model.get('max')}"
-        <div class="${ppfx}field ${ppfx}field-range">
+          step="${model.get('step')}"/>
-          <input type="range"
-            min="${model.get('min')}"
-            max="${model.get('max')}"
-            step="${model.get('step')}"/>
-        </div>
       </div>
     `;
   },
 
-  init() {
-    console.log('Init slider');
-    const model = this.model;
-    this.listenTo(model, 'change:unit', this.modelValueChanged);
-    this.listenTo(model, 'el:change', this.elementUpdated);
-  },
-
   getSliderEl() {
     if (!this.slider) {
       this.slider = this.el.querySelector('input[type=range]');
@@ -56,24 +43,7 @@ module.exports = require('./PropertyView').extend({
   },
 
   setValue(value) {
+    this.getSliderEl().value = value;
     this.inputInst.setValue(value, {silent: 1});
   },
-
-  onRender() {
-    const ppfx = this.ppfx;
-
-    if (!this.input) {
-      const inputNumber = new InputNumber({
-        model: this.model,
-        ppfx: this.ppfx
-      });
-      const input = inputNumber.render();
-      this.$el.find(`.${ppfx}fields`).append(input.$el);
-      this.$input = input.inputEl;
-      this.$unit = input.unitEl;
-      this.input = this.$input.get(0);
-      this.inputInst = input;
-    }
-  },
-
 });

src/style_manager/view/PropertyView.js

@@ -8,7 +8,9 @@ module.exports = Backbone.View.extend({
       <div class="${pfx}label">
         ${this.templateLabel(model)}
       </div>
-      ${this.templateInput(model)}
+      <div class="${this.ppfx}fields">
+        ${this.templateInput(model)}
+      </div>
     `;
   },
 

src/styles/scss/_gjs_inputs.scss

@@ -20,6 +20,10 @@
   line-height: 18px;
 }
 
+.#{$app-prefix}fields {
+  display: flex;
+}
+
 .#{$app-prefix}field {
   background-color: $mainDkColor;
   border: none;
@@ -43,6 +47,10 @@
     position: relative;
     padding: $inputPadding;
     z-index: 1;
+
+    &:focus {
+      outline: none;
+    }
   }
 
   textarea {