<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/01/changing-the-preview-color-width-for-the-colorpicker-control-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="top"
		backgroundColor="white" viewSourceURL="srcview/index.html">

	<mx:Script>
		<![CDATA[
			import mx.events.SliderEvent;

			private function slider_change(evt:SliderEvent):void {
				var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
				cssObj.setStyle("previewWidth", evt.value);

				colorPicker.open();
			}
		]]>
	</mx:Script>

	<mx:Style>
		ColorPicker {
			swatchPanelStyleName: myCustomSwatchPanelStyleName;
		}

		.myCustomSwatchPanelStyleName {
		}
	</mx:Style>

	<mx:ApplicationControlBar dock="true">
		<mx:Form styleName="plain">
			<mx:FormItem label="previewWidth:">
				<mx:HSlider id="slider"
						minimum="0"
						maximum="145"
						value="45"
						snapInterval="1"
						tickInterval="5"
						liveDragging="true"
						dataTipPrecision="0"
						change="slider_change(event);" />
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>

	<mx:ColorPicker id="colorPicker" />

</mx:Application>