diff --git a/atom/browser/ui/cocoa/atom_touch_bar.mm b/atom/browser/ui/cocoa/atom_touch_bar.mm
index 469160c5a58..8a746ccbe2f 100644
--- a/atom/browser/ui/cocoa/atom_touch_bar.mm
+++ b/atom/browser/ui/cocoa/atom_touch_bar.mm
@@ -196,11 +196,6 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
         withSettings:(const mate::PersistentDictionary&)settings {
   NSButton* button = (NSButton*)item.view;
 
-  std::string customizationLabel;
-  if (settings.Get("customizationLabel", &customizationLabel)) {
-    item.customizationLabel = base::SysUTF8ToNSString(customizationLabel);
-  }
-
   std::string backgroundColor;
   if (settings.Get("backgroundColor", &backgroundColor)) {
     button.bezelColor = [self colorFromHexColorString:backgroundColor];
@@ -211,17 +206,6 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
     button.title = base::SysUTF8ToNSString(label);
   }
 
-  std::string labelColor;
-  if (!label.empty() && settings.Get("labelColor", &labelColor)) {
-    NSMutableAttributedString* attrTitle = [[[NSMutableAttributedString alloc] initWithString:base::SysUTF8ToNSString(label)] autorelease];
-    NSRange range = NSMakeRange(0, [attrTitle length]);
-    [attrTitle addAttribute:NSForegroundColorAttributeName
-                      value:[self colorFromHexColorString:labelColor]
-                      range:range];
-    [attrTitle fixAttributesInRange:range];
-    button.attributedTitle = attrTitle;
-  }
-
   gfx::Image image;
   if (settings.Get("image", &image)) {
     button.image = image.AsNSImage();
@@ -247,11 +231,6 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
   settings.Get("label", &label);
   NSTextField* text_field = (NSTextField*)item.view;
   text_field.stringValue = base::SysUTF8ToNSString(label);
-
-  std::string customizationLabel;
-  if (settings.Get("customizationLabel", &customizationLabel)) {
-    item.customizationLabel = base::SysUTF8ToNSString(customizationLabel);
-  }
 }
 
 - (NSTouchBarItem*)makeColorPickerForID:(NSString*)id
@@ -263,32 +242,26 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
   NSColorPickerTouchBarItem* item = [[NSClassFromString(@"NSColorPickerTouchBarItem") alloc] initWithIdentifier:identifier];
   item.target = self;
   item.action = @selector(colorPickerAction:);
-
-  std::string selectedColor;
-  if (settings.Get("selectedColor", &selectedColor)) {
-    item.color = [self colorFromHexColorString:selectedColor];
-  }
-
-  std::vector<std::string> colors;
-  if (settings.Get("availableColors", &colors) && colors.size() > 0) {
-    NSColorList* color_list  = [[[NSColorList alloc] initWithName:identifier] autorelease];
-    for (size_t i = 0; i < colors.size(); ++i) {
-      [color_list insertColor:[self colorFromHexColorString:colors[i]]
-                          key:base::SysUTF8ToNSString(colors[i])
-                      atIndex:i];
-    }
-    item.colorList = color_list;
-  }
-
   [self updateColorPicker:item withSettings:settings];
   return item;
 }
 
 - (void)updateColorPicker:(NSColorPickerTouchBarItem*)item
              withSettings:(const mate::PersistentDictionary&)settings {
-  std::string customizationLabel;
-  if (settings.Get("customizationLabel", &customizationLabel)) {
-    item.customizationLabel = base::SysUTF8ToNSString(customizationLabel);
+  std::vector<std::string> colors;
+  if (settings.Get("availableColors", &colors) && colors.size() > 0) {
+    NSColorList* color_list  = [[[NSColorList alloc] initWithName:@""] autorelease];
+    for (size_t i = 0; i < colors.size(); ++i) {
+      [color_list insertColor:[self colorFromHexColorString:colors[i]]
+                          key:base::SysUTF8ToNSString(colors[i])
+                      atIndex:i];
+    }
+     item.colorList = color_list;
+  }
+
+  std::string selectedColor;
+  if (settings.Get("selectedColor", &selectedColor)) {
+    item.color = [self colorFromHexColorString:selectedColor];
   }
 }
 
@@ -307,25 +280,20 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
 
 - (void)updateSlider:(NSSliderTouchBarItem*)item
         withSettings:(const mate::PersistentDictionary&)settings {
-  std::string customizationLabel;
-  if (settings.Get("customizationLabel", &customizationLabel)) {
-    item.customizationLabel = base::SysUTF8ToNSString(customizationLabel);
-  }
-
   std::string label;
   settings.Get("label", &label);
   item.label = base::SysUTF8ToNSString(label);
 
   int maxValue = 100;
   int minValue = 0;
-  int initialValue = 50;
+  int value = 50;
   settings.Get("minValue", &minValue);
   settings.Get("maxValue", &maxValue);
-  settings.Get("initialValue", &initialValue);
+  settings.Get("value", &value);
 
   item.slider.minValue = minValue;
   item.slider.maxValue = maxValue;
-  item.slider.doubleValue = initialValue;
+  item.slider.doubleValue = value;
 }
 
 - (NSTouchBarItem*)makePopoverForID:(NSString*)id
@@ -341,11 +309,6 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
 
 - (void)updatePopover:(NSPopoverTouchBarItem*)item
          withSettings:(const mate::PersistentDictionary&)settings {
-  std::string customizationLabel;
-  if (settings.Get("customizationLabel", &customizationLabel)) {
-    item.customizationLabel = base::SysUTF8ToNSString(customizationLabel);
-  }
-
   std::string label;
   gfx::Image image;
   if (settings.Get("label", &label)) {
@@ -387,13 +350,8 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
       }
     }
   }
-
-  NSGroupTouchBarItem* item = [NSClassFromString(@"NSGroupTouchBarItem") groupItemWithIdentifier:identifier items:generatedItems];
-  std::string customizationLabel;
-  if (settings.Get("customizationLabel", &customizationLabel)) {
-    item.customizationLabel = base::SysUTF8ToNSString(customizationLabel);;
-  }
-  return item;
+  return [NSClassFromString(@"NSGroupTouchBarItem") groupItemWithIdentifier:identifier
+                                                                      items:generatedItems];
 }
 
 @end
diff --git a/lib/browser/api/touch-bar.js b/lib/browser/api/touch-bar.js
index dd8e89f4c29..12138563c4c 100644
--- a/lib/browser/api/touch-bar.js
+++ b/lib/browser/api/touch-bar.js
@@ -96,16 +96,33 @@ class TouchBarItem extends EventEmitter {
     super()
     this.id = `${nextItemID++}`
   }
+
+  _addLiveProperty (name, initialValue) {
+    const privateName = `_${name}`
+    this[privateName] = initialValue
+    Object.defineProperty(this, name, {
+      get: function () {
+        return this[privateName]
+      },
+      set: function (value) {
+        this[privateName] = value
+        this.emit('change')
+      },
+      enumerable: true
+    })
+  }
 }
 
 TouchBar.Button = class TouchBarButton extends TouchBarItem {
   constructor (config) {
     super(config)
     this.type = 'button'
-    this.label = config.label
-    this.backgroundColor = config.backgroundColor
-    this.labelColor = config.labelColor
-    this.onInteraction = config.click
+    const {click, label, backgroundColor} = config
+    this._addLiveProperty('label', label)
+    this._addLiveProperty('backgroundColor', backgroundColor)
+    if (typeof click === 'function') {
+      this.onInteraction = config.click
+    }
   }
 }
 
@@ -113,12 +130,13 @@ TouchBar.ColorPicker = class TouchBarColorPicker extends TouchBarItem {
   constructor (config) {
     super(config)
     this.type = 'colorpicker'
-    this.availableColors = config.availableColors
-    this.selectedColor = config.selectedColor
+    const {availableColors, change, selectedColor} = config
+    this._addLiveProperty('availableColors', availableColors)
+    this._addLiveProperty('selectedColor', selectedColor)
 
-    const {change} = config
     if (typeof change === 'function') {
       this.onInteraction = (details) => {
+        this._selectedColor = details.color
         change(details.color)
       }
     }
@@ -140,16 +158,7 @@ TouchBar.Label = class TouchBarLabel extends TouchBarItem {
   constructor (config) {
     super(config)
     this.type = 'label'
-    this._label = config.label
-  }
-
-  set label (newLabel) {
-    this._label = newLabel
-    this.emit('change')
-  }
-
-  get label () {
-    return this._label
+    this._addLiveProperty('label', config.label)
   }
 }
 
@@ -157,7 +166,7 @@ TouchBar.Spacer = class TouchBarSpacer extends TouchBarItem {
   constructor (config) {
     super(config)
     this.type = 'spacer'
-    this.size = config.size
+    this._addLiveProperty('size', config.size)
   }
 }
 
@@ -165,7 +174,7 @@ TouchBar.Popover = class TouchBarPopover extends TouchBarItem {
   constructor (config) {
     super(config)
     this.type = 'popover'
-    this.label = config.label
+    this._addLiveProperty('label', config.label)
     this.showCloseButton = config.showCloseButton
     this.child = config.items
     if (!(this.child instanceof TouchBar)) {
@@ -178,13 +187,15 @@ TouchBar.Slider = class TouchBarSlider extends TouchBarItem {
   constructor (config) {
     super(config)
     this.type = 'slider'
-    this.minValue = config.minValue
-    this.maxValue = config.maxValue
-    this.initialValue = config.initialValue
+    const {change, label, minValue, maxValue, value} = config
+    this._addLiveProperty('label', label)
+    this._addLiveProperty('minValue', minValue)
+    this._addLiveProperty('maxValue', maxValue)
+    this._addLiveProperty('value', value)
 
-    const {change} = config
     if (typeof change === 'function') {
       this.onInteraction = (details) => {
+        this._value = details.value
         change(details.value)
       }
     }