diff --git a/src/widget/edit-widget-aspect-control.js b/src/widget/edit-widget-aspect-control.js
index 502e837..59af823 100644
--- a/src/widget/edit-widget-aspect-control.js
+++ b/src/widget/edit-widget-aspect-control.js
@@ -28,7 +28,9 @@ class EditWidgetAspectControl extends React.Component {
 
     this.state = {
       widget: {
-        lockAspect: true
+        customProperties:{
+        isLocked: true
+        }
       }
     };
   }
@@ -40,7 +42,7 @@ class EditWidgetAspectControl extends React.Component {
   render() {
     return (
       <FormGroup>
-        <FormCheck id="lockAspect" checked={this.state.widget.lockAspect} onChange={e => this.props.handleChange(e)}>Lock Aspect</FormCheck>
+        <FormCheck id="lockAspect" checked={this.state.widget.customProperties.isLocked} onChange={e => this.props.handleChange(e)}>Lock Aspect</FormCheck>
       </FormGroup>
     );
   }
diff --git a/src/widget/edit-widget-checkbox-control.js b/src/widget/edit-widget-checkbox-control.js
index 0118abb..41c17c6 100644
--- a/src/widget/edit-widget-checkbox-control.js
+++ b/src/widget/edit-widget-checkbox-control.js
@@ -27,7 +27,11 @@ class EditWidgetCheckboxControl extends React.Component {
     super(props);
 
     this.state = {
-      widget: {}
+      widget: {
+        customProperties:{
+
+        }
+      }
     };
   }
 
@@ -37,7 +41,7 @@ class EditWidgetCheckboxControl extends React.Component {
 
   render() {
     return <FormGroup>
-      <FormCheck id={this.props.controlId} checked={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)}>{this.props.text}</FormCheck>
+      <FormCheck id={this.props.controlId} label={this.props.controlId} checked={this.state.widget[this.props.controlId] || this.state.widget.customProperties[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)}></FormCheck>
     </FormGroup>;
   }
 }
diff --git a/src/widget/edit-widget-color-control.js b/src/widget/edit-widget-color-control.js
index 8ec2bd3..212e487 100644
--- a/src/widget/edit-widget-color-control.js
+++ b/src/widget/edit-widget-color-control.js
@@ -43,7 +43,9 @@ class EditWidgetColorControl extends Component {
     super(props);
 
     this.state = {
-      widget: {}
+      widget: {
+        customProperties:{}
+      }
     };
   }
 
@@ -57,7 +59,7 @@ class EditWidgetColorControl extends Component {
     return (
       <FormGroup bsclass="color-control">
         <Row>
-          <Col className={FormLabel} style={{whiteSpace: 'nowrap' }} sm={2}>
+          <Col className={FormLabel} style={{whiteSpace: 'nowrap' }} sm={3}>
             { this.props.label }
           </Col>
           <Col sm={10} bsclass='colors-column'>
@@ -69,7 +71,7 @@ class EditWidgetColorControl extends Component {
                 };
 
                 let checkedClass = classNames({
-                  'checked': idx === this.state.widget[this.props.controlId]
+                  'checked': idx === this.state.widget[this.props.controlId] || this.state.widget.customProperties[this.props.controlId]
                 });
 
                 return (<FormCheck type='radio' key={idx} name={this.props.controlId} style={colorStyle} className={checkedClass} value={idx} inline onChange={(e) => this.props.handleChange({target: { id: this.props.controlId, value: idx}})} />)
diff --git a/src/widget/edit-widget-color-zones-control.js b/src/widget/edit-widget-color-zones-control.js
index c124353..3e64684 100644
--- a/src/widget/edit-widget-color-zones-control.js
+++ b/src/widget/edit-widget-color-zones-control.js
@@ -33,7 +33,9 @@ class EditWidgetColorZonesControl extends React.Component {
 
     this.state = {
       widget: {
+        customProperties:{
         zones: []
+        }
       },
       selectedZones: []
     };
@@ -46,7 +48,7 @@ class EditWidgetColorZonesControl extends React.Component {
   addZone = () => {
     // add row
     const widget = this.state.widget;
-    widget.zones.push({ strokeStyle: 'ffffff', min: 0, max: 100 });
+    widget.customProperties.zones.push({ strokeStyle: 'ffffff', min: 0, max: 100 });
 
     this.setState({ widget });
 
@@ -58,7 +60,7 @@ class EditWidgetColorZonesControl extends React.Component {
     const widget = this.state.widget;
 
     this.state.selectedZones.forEach(row => {
-      widget.zones.splice(row, 1);
+      widget.customProperties.zones.splice(row, 1);
     });
 
     this.setState({ selectedZones: [], widget });
@@ -71,11 +73,11 @@ class EditWidgetColorZonesControl extends React.Component {
     const widget = this.state.widget;
 
     if (column === 1) {
-      widget.zones[row].strokeStyle = event.target.value;
+      widget.customProperties.zones[row].strokeStyle = event.target.value;
     } else if (column === 2) {
-      widget.zones[row].min = event.target.value;
+      widget.customProperties.zones[row].min = event.target.value;
     } else if (column === 3) {
-      widget.zones[row].max = event.target.value;
+      widget.customProperties.zones[row].max = event.target.value;
     }
 
     this.setState({ widget });
@@ -88,7 +90,7 @@ class EditWidgetColorZonesControl extends React.Component {
     const event = {
       target: {
         id: 'zones',
-        value: widget.zones
+        value: widget.customProperties.zones
       }
     };
 
@@ -117,15 +119,15 @@ class EditWidgetColorZonesControl extends React.Component {
     return <FormGroup>
       <FormLabel>Color zones</FormLabel>
 
-      <Table data={this.state.widget.zones}>
+      <Table data={this.state.widget.customProperties.zones}>
         <TableColumn width="20" checkbox onChecked={this.checkedCell} />
         <TableColumn title="Color" dataKey="strokeStyle" inlineEditable onInlineChange={this.changeCell}  />
         <TableColumn title="Minimum" dataKey="min" inlineEditable onInlineChange={this.changeCell} />
         <TableColumn title="Maximum" dataKey="max" inlineEditable onInlineChange={this.changeCell} />
       </Table>
 
-      <Button onClick={this.addZone} disabled={!this.props.widget.colorZones}><Icon icon="plus" /> Add</Button>
-      <Button onClick={this.removeZones} disabled={!this.props.widget.colorZones}><Icon icon="minus" /> Remove</Button>
+      <Button onClick={this.addZone} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="plus" /> Add</Button>
+      <Button onClick={this.removeZones} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="minus" /> Remove</Button>
     </FormGroup>;
   }
 }
diff --git a/src/widget/edit-widget-html-content.js b/src/widget/edit-widget-html-content.js
index 8633a61..e11fd60 100644
--- a/src/widget/edit-widget-html-content.js
+++ b/src/widget/edit-widget-html-content.js
@@ -44,7 +44,7 @@ class EditWidgetHTMLContent extends React.Component {
   render() {
     return <FormGroup controlId={this.props.controlId}>
       <FormLabel>HTML Content</FormLabel>
-      <FormControl onKeyPress={this.handleKeyIgnore} componentClass="textarea" style={{ height: 200 }} placeholder={this.props.placeholder} value={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)} />
+      <FormControl onKeyPress={this.handleKeyIgnore} componentClass="textarea" style={{ height: 200 }} placeholder={this.props.placeholder} value={this.state.widget[this.props.controlId] || this.state.widget.customProperties[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)} />
     </FormGroup>;
   }
 }
diff --git a/src/widget/edit-widget-image-control.js b/src/widget/edit-widget-image-control.js
index e9d0118..501e5eb 100644
--- a/src/widget/edit-widget-image-control.js
+++ b/src/widget/edit-widget-image-control.js
@@ -30,7 +30,9 @@ class EditImageWidgetControl extends React.Component {
 
     this.state = {
       widget: {
+        customProperties:{
         file: ''
+        }
       },
       fileList: null,
       progress: 0
@@ -73,7 +75,7 @@ class EditImageWidgetControl extends React.Component {
     return <div>
       <FormGroup controlId="file">
         <FormLabel>Image</FormLabel>
-        <FormControl componentClass="select" value={this.state.widget.file} onChange={(e) => this.props.handleChange(e)}>
+        <FormControl componentClass="select" value={this.state.widget.customProperties.file} onChange={(e) => this.props.handleChange(e)}>
           {this.props.files.length === 0 ? (
             <option disabled value style={{ display: 'none' }}>No images found, please upload one first.</option>
           ) : (
diff --git a/src/widget/edit-widget-min-max-control.js b/src/widget/edit-widget-min-max-control.js
index c717f55..ef7f00a 100644
--- a/src/widget/edit-widget-min-max-control.js
+++ b/src/widget/edit-widget-min-max-control.js
@@ -45,7 +45,7 @@ class EditWidgetMinMaxControl extends React.Component {
     console.log(this.state.widget);
     return <FormGroup>
       <FormLabel>{this.props.label}</FormLabel>
-      <FormCheck id={this.props.controlId + "UseMinMax"} checked={this.state.widget[this.props.controlId + "UseMinMax"] || ''} onChange={e => this.props.handleChange(e)}>Enable min-max</FormCheck>
+      <FormCheck id={this.props.controlId + "UseMinMax"} checked={this.state.widget[this.props.controlId + "UseMinMax"] || ''} onChange={e => this.props.handleChange(e)}></FormCheck>
 
       <Table>
         <tbody>
diff --git a/src/widget/edit-widget-orientation.js b/src/widget/edit-widget-orientation.js
index 41503ba..2da449d 100644
--- a/src/widget/edit-widget-orientation.js
+++ b/src/widget/edit-widget-orientation.js
@@ -29,7 +29,9 @@ class EditWidgetOrientation extends Component {
     super(props);
 
     this.state = {
-      widget: {}
+      widget: {
+        customProperties:{}
+      }
     };
   }
 
@@ -48,7 +50,7 @@ class EditWidgetOrientation extends Component {
     return (
         <FormGroup controlId="orientation">
           <Row>
-            <Col className={FormLabel} sm={2}>
+            <Col className={FormLabel} sm={3}>
               Orientation
             </Col>
             <Col sm={10}>
@@ -58,8 +60,7 @@ class EditWidgetOrientation extends Component {
                   let name = WidgetSlider.OrientationTypes[type].name;
 
                   return (
-                    <FormCheck inline key={value} type='radio' name='orientation' checked={ value === this.state.widget.orientation } onChange={(e) => this.handleOrientationChange(value)}>
-                      { name }
+                    <FormCheck inline label={name} id={value} type='radio' title='orientation' checked={ value === this.state.widget.customProperties.orientation } onChange={(e) => this.handleOrientationChange(value)}>
                     </FormCheck>)
                 })
               }
diff --git a/src/widget/widgets/button.js b/src/widget/widgets/button.js
index 62b8c1b..a7fd2ae 100644
--- a/src/widget/widgets/button.js
+++ b/src/widget/widgets/button.js
@@ -34,6 +34,7 @@ class WidgetButton extends Component {
   }
 
   onPress(e) {
+    console.log("button was pressed!");
     if (!this.props.widget.customProperties.toggle) {
       this.setState({ pressed: true });
       this.valueChanged(this.props.widget.customProperties.on_value);
@@ -41,6 +42,7 @@ class WidgetButton extends Component {
   }
 
   onRelease(e) {
+    console.log("button was released!");
     let nextState = false;
     if (this.props.widget.customProperties.toggle) {
       nextState = !this.state.pressed;
diff --git a/src/widget/widgets/slider.js b/src/widget/widgets/slider.js
index 435a29e..4c41a4c 100644
--- a/src/widget/widgets/slider.js
+++ b/src/widget/widgets/slider.js
@@ -119,10 +119,7 @@ class WidgetSlider extends Component {
         </div>
       ) : (
         <div className={widgetClasses}>
-          <label>{ fields.name }</label>
-          { fields.control }
-          { fields.value }
-          { this.props.widget.customProperties.showUnit && fields.unit }
+          <Slider vertical min={ this.props.widget.customProperties.rangeMin } max={ this.props.widget.customProperties.rangeMax } step={ this.props.widget.customProperties.step } value={ this.state.value } disabled={ this.props.editing } onChange={ (v) => this.valueIsChanging(v) } onAfterChange={ (v) => this.valueChanged(v) }/>,
         </div>
       )
     );
@@ -130,3 +127,17 @@ class WidgetSlider extends Component {
 }
 
 export default WidgetSlider;
+/*!isVertical? (
+  <div className={widgetClasses}>
+    <label>{ fields.name }</label>
+    <div className='slider'>{ fields.control }</div>
+    <span>{ fields.value }</span>
+  </div>
+) : (
+  <div className={widgetClasses}>
+    <label>{ fields.name }</label>
+    { fields.control }
+    { fields.value }
+    { this.props.widget.customProperties.showUnit && fields.unit }
+  </div>
+)*/
\ No newline at end of file