diff --git a/src/ui/Component.js b/src/ui/Component.js
index fd26f342..bf32c07e 100644
--- a/src/ui/Component.js
+++ b/src/ui/Component.js
@@ -41,22 +41,23 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
 		},
 
 		slider: {
-			type: 'range'
+			type: 'range',
+			number: true
 		},
 
 		list: {
 			tag: 'select',
 
 			options: function() {
-				DomElement.removeChildren(this.element);
+				DomElement.removeChildren(this._inputItem);
 				DomElement.create(Base.each(this._options, function(option) {
 					this.push('option', { value: option, text: option });
-				}, []), this.element);
+				}, []), this._inputItem);
 			},
 
 			value: function(value) {
 				DomElement.set(
-					DomElement.find('option[value="' + value + '"]', this.element),
+					DomElement.find('option[value="' + value + '"]', this._inputItem),
 					'selected', true);
 			}
 		}
@@ -72,14 +73,14 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
 		this._info = this._types[this._type] || { type: this._type };
 		var that = this,
 			fireChange = false;
-		this.element = DomElement.create(this._info.tag || 'input', {
+		this._inputItem = DomElement.create(this._info.tag || 'input', {
 			type: this._info.type,
 			events: {
 				change: function() {
 					var key = that._info.value;
 					if (typeof key === 'function')
 						key = null;
-					var value = DomElement.get(that.element, key || 'value');
+					var value = DomElement.get(this, key || 'value');
 					if (fireChange) {
 						that.palette.fire('change', that, that.name, value);
 						that.fire('change', value);
@@ -90,6 +91,10 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
 				}
 			}
 		});
+		this._element = DomElement.create('tr', [
+			this._labelItem = DomElement.create('td'),
+			'td', this._inputItem
+		]);
 		Base.each(obj, function(value, key) {
 			this[key] = value;
 		}, this);
@@ -102,6 +107,15 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
 		return this._type;
 	},
 
+	getLabel: function() {
+		return this._label;
+	},
+
+	setLabel: function(label) {
+		this._label = label;
+		DomElement.set(this._labelItem, 'text', label + ':');
+	},
+
 	getOptions: function() {
 		return this._options;
 	},
@@ -121,18 +135,18 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
 		if (typeof key === 'function')
 			key.call(this, value);
 		else
-			DomElement.set(this.element, key || 'value', value);
+			DomElement.set(this._inputItem, key || 'value', value);
 		this._value = value;
 	},
 
 	getRange: function() {
-		return [toFloat(DomElement.get(this.element, 'min')),
-				toFloat(DomElement.get(this.element, 'max'))];
+		return [toFloat(DomElement.get(this._inputItem, 'min')),
+				toFloat(DomElement.get(this._inputItem, 'max'))];
 	},
 
 	setRange: function(min, max) {
 		var range = Array.isArray(min) ? min : [min, max];
-		DomElement.set(this.element, { min: range[0], max: range[1] });
+		DomElement.set(this._inputItem, { min: range[0], max: range[1] });
 	},
 
 	getMin: function() {
@@ -152,11 +166,11 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
 	},
 
 	getStep: function() {
-		return toFloat(DomElement.get(this.element, 'step'));
+		return toFloat(DomElement.get(this._inputItem, 'step'));
 	},
 
 	setStep: function(step) {
-		DomElement.set(this.element, 'step', step);
+		DomElement.set(this._inputItem, 'step', step);
 	},
 
 	reset: function() {
diff --git a/src/ui/Palette.js b/src/ui/Palette.js
index 419064f6..2ee9f086 100644
--- a/src/ui/Palette.js
+++ b/src/ui/Palette.js
@@ -20,35 +20,31 @@ var Palette = this.Palette = Base.extend(Callback, /** @lends Palette# */{
 	initialize: function(title, components, values) {
 		var parent = DomElement.find('.palettejs-panel')
 			|| DomElement.find('body').appendChild(
-				DomElement.create('div', { 'class': 'palettejs-panel' })),
-			table = parent.appendChild(
-				DomElement.create('table', { 'class': 'palettejs-pane' })),
-			that = this;
+				DomElement.create('div', { 'class': 'palettejs-panel' }));
+		this._element = parent.appendChild(
+			DomElement.create('table', { 'class': 'palettejs-pane' })),
 		this._title = title;
 		if (!values)
 			values = {};
-		this._components = Base.each(components, function(component, name) {
+		for (var name in (this._components = components)) {
+			var component = components[name];
 			if (!(component instanceof Component)) {
 				if (component.value == null)
 					component.value = values[name];
 				component.name = name;
 				component = components[name] = new Component(component);
 			}
-			component.palette = that;
+			this._element.appendChild(component._element);
+			component.palette = this;
 			// Make sure each component has an entry in values, so observers get
 			// installed further down.
 			if (values[name] === undefined)
 				values[name] = null;
-			var row = table.appendChild(
-				DomElement.create('tr', [
-					'td', { text: (component.label || name) + ':' },
-					'td', component.element
-				])
-			);
+		}
+		// Now replace each entry in values with a getter / setters so we can
+		// observe change.
 		});
 		this._values = Base.each(values, function(value, name) {
-			// Replace each entry with an getter / setters so we can observe
-			// change.
 			Base.define(values, name, {
 				enumerable: true,
 				configurable: true,
@@ -67,5 +63,9 @@ var Palette = this.Palette = Base.extend(Callback, /** @lends Palette# */{
 	reset: function() {
 		for (var i in this._components)
 			this._components[i].reset();
+	},
+
+	remove: function() {
+		DomElement.remove(this._element);
 	}
 });