diff --git a/src/ui/Component.js b/src/ui/Component.js
index 56a5d459..afbcb1d1 100644
--- a/src/ui/Component.js
+++ b/src/ui/Component.js
@@ -54,12 +54,6 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
 				DomElement.create(Base.each(this._options, function(option) {
 					this.push('option', { value: option, text: option });
 				}, []), this._inputItem);
-			},
-
-			value: function(value) {
-				DomElement.set(
-					DomElement.find('option[value="' + value + '"]', this._inputItem),
-					'selected', true);
 			}
 		}
 	},
@@ -78,14 +72,10 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
 			type: this._info.type,
 			events: {
 				change: function() {
-					var key = that._info.value;
-					if (typeof key === 'function')
-						key = null;
-					var value = DomElement.get(this, key || 'value');
-					if (that._info.number)
-						value = Base.toFloat(value);
+					that.setValue(
+						DomElement.get(this, that._info.value || 'value'));
 					if (fireChange) {
-						that.palette.fire('change', that, that.name, value);
+						that._palette.fire('change', that, that.name, value);
 						that.fire('change', value);
 					}
 				},
@@ -134,12 +124,11 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
 	},
 
 	setValue: function(value) {
-		var key = this._info.value;
-		if (typeof key === 'function')
-			key.call(this, value);
-		else
-			DomElement.set(this._inputItem, key || 'value', value);
-		this._value = value;
+		var key = this._info.value || 'value';
+		DomElement.set(this._inputItem, key, value);
+		// Read back and convert from input again, to make sure we're in sync
+		value = DomElement.get(this._inputItem, key);
+		this._value = this._info.number ? Base.toFloat(value) : value;
 	},
 
 	getRange: function() {
diff --git a/src/ui/Palette.js b/src/ui/Palette.js
index 2e9cc3c3..ec4690e7 100644
--- a/src/ui/Palette.js
+++ b/src/ui/Palette.js
@@ -35,32 +35,25 @@ var Palette = this.Palette = Base.extend(Callback, /** @lends Palette# */{
 				component = components[name] = new Component(component);
 			}
 			this._element.appendChild(component._element);
-			component.palette = this;
+			component._palette = this;
 			// Make sure each component has an entry in values, so observers get
 			// installed further down.
 			if (values[name] === undefined)
 				values[name] = component.value;
 		}
 		// Now replace each entry in values with a getter / setters so we can
-		// observe change.
-		// Introduce a private _values list that actually keeps the values, and
-		// use change events to keep it up to date
-		var _values = {};
-		this.attach('change', function(component, name, value) {
-			_values[name] = value;
-		});
+		// directly link the value to the component and  observe change.
 		this._values = Base.each(values, function(value, name) {
-			_values[name] = value;
+			var component = components[name];
 			Base.define(values, name, {
 				enumerable: true,
 				configurable: true,
 				writable: true,
 				get: function() {
-					return _values[name];
+					return component._value;
 				},
 				set: function(val) {
-					_values[name] = val;
-					components[name].setValue(val);
+					component.setValue(val);
 				}
 			});
 		});