<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/11/customing-the-flex-hslider-and-vslider-controls/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="horizontal"
		verticalAlign="middle"
		backgroundColor="white"
		creationComplete="init();" viewSourceURL="srcview/index.html">

	<mx:Style>
		.MyDataTip {
			backgroundAlpha: 1.0;
			backgroundColor: haloBlue;
			color: white;
			fontWeight: bold;
		}
	</mx:Style>

	<mx:Script>
		<![CDATA[
			private function init():void {
				slider.labels = [slider.minimum, slider.maximum];
			}
		]]>
	</mx:Script>

	<mx:ApplicationControlBar dock="true">
		<mx:Form>
			<mx:FormItem label="allowTrackClick:">
				<mx:CheckBox id="allowTrackClickCh" selected="true" />
			</mx:FormItem>
			<mx:FormItem label="invertThumbDirection:">
				<mx:CheckBox id="invertThumbDirectionCh" />
			</mx:FormItem>
			<mx:FormItem label="showTrackHighlight:">
				<mx:CheckBox id="showTrackHighlightCh"
						selected="true" />
			</mx:FormItem>
			<mx:FormItem label="showDataTip:">
				<mx:CheckBox id="showDataTipCh"
						selected="true" />
			</mx:FormItem>
			<mx:FormItem label="dataTipPlacement:">
				<mx:ComboBox id="dataTipPlacementCB"
						selectedIndex="2">
					<mx:dataProvider>
						<mx:Array>
							<mx:Object label="left" />
							<mx:Object label="right" />
							<mx:Object label="top" />
							<mx:Object label="bottom" />
						</mx:Array>
					</mx:dataProvider>
				</mx:ComboBox>
			</mx:FormItem>
			<mx:FormItem label="dataTipPrecision:">
				<mx:NumericStepper id="dataTipPrecisionNS"
						minimum="0"
						maximum="3"
						value="2" />
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>

	<mx:HSlider id="slider"
			invertThumbDirection="{invertThumbDirectionCh.selected}"
			minimum="-10"
			maximum="20"
			tickInterval="5"
			liveDragging="true"
			showDataTip="{showDataTipCh.selected}"
			showTrackHighlight="{showTrackHighlightCh.selected}"
			dataTipPlacement="{dataTipPlacementCB.selectedItem.label}"
			allowTrackClick="{allowTrackClickCh.selected}"
			dataTipPrecision="{dataTipPrecisionNS.value}"
			dataTipStyleName="MyDataTip" />

</mx:Application>
