diff --git a/index.html b/index.html
index 800fd5996..1eda77747 100755
--- a/index.html
+++ b/index.html
@@ -1037,7 +1037,14 @@
         sectors: [{
           name: 'General',
           open: false,
-          buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
+          buildProps: ['opacity', 'float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
+          properties: [{
+            type: 'slider',
+            property: 'opacity',
+            step: 0.01,
+            max: 1,
+            min:0,
+          }]
         },{
           name: 'Dimension',
           open: false,
@@ -1274,11 +1281,6 @@
     }]);
 
     var bm = editor.BlockManager;
-    bm.add('mappy', {
-      label: 'Map',
-      attributes: {class:'fa fa-marker'},
-      content: {type: 'map'}
-    })
     /*
     bm.add('link-block', {
       label: 'Link Block',
diff --git a/src/style_manager/model/Properties.js b/src/style_manager/model/Properties.js
index f4d30869a..c7288ca62 100644
--- a/src/style_manager/model/Properties.js
+++ b/src/style_manager/model/Properties.js
@@ -57,6 +57,15 @@ module.exports = require('backbone').Collection.extend(TypeableCollection).exten
           return value;
         }
       }
+    },{
+      id: 'slider',
+      model: require('./PropertySlider'),
+      view: require('./../view/PropertySliderView'),
+      isType(value) {
+        if (value && value.type == 'slider') {
+          return value;
+        }
+      }
     },{
       id: 'integer',
       model: require('./PropertyInteger'),
diff --git a/src/style_manager/model/PropertySlider.js b/src/style_manager/model/PropertySlider.js
new file mode 100644
index 000000000..c21975e71
--- /dev/null
+++ b/src/style_manager/model/PropertySlider.js
@@ -0,0 +1,9 @@
+const Property = require('./PropertyInteger');
+
+module.exports = Property.extend({
+
+  defaults: Object.assign({}, Property.prototype.defaults, {
+    showInput: 1,
+  }),
+
+});
diff --git a/src/style_manager/view/PropertyIntegerView.js b/src/style_manager/view/PropertyIntegerView.js
index d8b4a41b0..cee5624ad 100644
--- a/src/style_manager/view/PropertyIntegerView.js
+++ b/src/style_manager/view/PropertyIntegerView.js
@@ -1,4 +1,4 @@
-var InputNumber = require('domain_abstract/ui/InputNumber');
+const InputNumber = require('domain_abstract/ui/InputNumber');
 
 module.exports = require('./PropertyView').extend({
 
diff --git a/src/style_manager/view/PropertySliderView.js b/src/style_manager/view/PropertySliderView.js
new file mode 100644
index 000000000..abaf2d323
--- /dev/null
+++ b/src/style_manager/view/PropertySliderView.js
@@ -0,0 +1,79 @@
+const InputNumber = require('domain_abstract/ui/InputNumber');
+
+module.exports = require('./PropertyView').extend({
+
+  events: {
+    'change': 'inputValueChanged',
+    'input': 'inputValueChangedSoft',
+  },
+
+  template(model) {
+    const pfx = this.pfx;
+    const ppfx = this.ppfx;
+    return `
+      <div class="${pfx}label">
+        ${this.templateLabel(model)}
+      </div>
+      <div class="${ppfx}fields">
+        <div class="${ppfx}field ${ppfx}field-range">
+          <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]');
+    }
+
+    return this.slider;
+  },
+
+  inputValueChanged() {
+    const model = this.model;
+    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.set('value', this.getInputValue(), {avoidStore: 1});
+    this.elementUpdated();
+  },
+
+  setValue(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;
+    }
+  },
+
+});
diff --git a/src/styles/scss/_gjs_inputs.scss b/src/styles/scss/_gjs_inputs.scss
index e0dc78506..eb5a41e13 100644
--- a/src/styles/scss/_gjs_inputs.scss
+++ b/src/styles/scss/_gjs_inputs.scss
@@ -258,6 +258,7 @@
      @include rangeThumbStyle();
     }
 
+    /* -moz-range-progress */
     &::-moz-range-track {
      @include rangeTrackStyle();
     }