<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical"
    width="400" height="475"
    backgroundColor="0xFFFFFF"
    borderStyle="inset"
    horizontalScrollPolicy="off"
    paddingLeft="5" paddingRight="5" paddingTop="5"
    xmlns:pg="com.polyGeek.pg.*" viewSourceURL="srcview/index.html">
    
<mx:Script>
    <![CDATA[
        
        private const LABEL_COL_WIDTH:int = 200;
        
    ]]>
</mx:Script>
    
    <mx:HBox width="100%" horizontalAlign="center">
        <mx:Label text="BarSlider" fontSize="18" fontWeight="bold" />
    </mx:HBox>
    
    <mx:HBox width="100%" height="52">
            
        <pg:BarSlider
            id="barSlider"
            barWidth="5" barHeight="50"
            barCount="50"
            value="0.55"
            min="0" max="1"
            buttonMode="{ btnMode.selected }"
            preciseMode="{ preciseMode.selected }"
            change="{     sliderValue.text = 'value: ' + Math.round( barSlider.value * 100 ) / 100;
                        sliderBarValue.value = barSlider.value }" />    
    </mx:HBox>
    
    <mx:Label 
            id="sliderValue"
            fontWeight="bold"
            width="150" />
            
    <!--BarCount-->
    <mx:HBox width="100%">
        <mx:Label text="barCount" width="{ LABEL_COL_WIDTH }" />
        <mx:NumericStepper
            id="stepperBarCount"
            minimum="4" maximum="1000" stepSize="1" value="{ barSlider.barCount }"
            change="{ barSlider.barCount = stepperBarCount.value }" />
        
    </mx:HBox>
    
    <!--BarWidth-->
    <mx:HBox width="100%">
        <mx:Label text="barWidth { sliderBarWidth.value }" width="{ LABEL_COL_WIDTH }" />
        <pg:BarSlider
            id="sliderBarWidth"
            min="1" max="50" value="{ barSlider.barWidth }"
            change="{ barSlider.barWidth = sliderBarWidth.value }" />
    </mx:HBox>
    
    <!--BarHeight-->
    <mx:HBox width="100%">
        <mx:Label text="barHeight { sliderBarHeight.value }" width="{ LABEL_COL_WIDTH }" />
        <pg:BarSlider
            id="sliderBarHeight"
            min="1" max="50" value="{ barSlider.barHeight }"
            change="{ barSlider.barHeight = sliderBarHeight.value }" />
    </mx:HBox>
    
    <!--Gap-->
    <mx:HBox width="100%">
        <mx:Label text="gap { sliderGap.value }" width="{ LABEL_COL_WIDTH }" />
        <pg:BarSlider
            id="sliderGap"
            min="0" max="11" value="{ barSlider.gap }"
            change="{ barSlider.gap = sliderGap.value }" />
    </mx:HBox>
    
    <!--Button Mode-->
    <mx:HBox width="100%">
        <mx:Label text="Button Mode" width="{ LABEL_COL_WIDTH }" />
        <mx:CheckBox
            id="btnMode"
            selected="true" />
    </mx:HBox>
    
    <!--is precise-->
    <mx:HBox width="100%">
        <mx:Label text="Precise Mode" width="{ LABEL_COL_WIDTH }" />
        <mx:CheckBox
            id="preciseMode"
            selected="true" />
    </mx:HBox>
    
    <!--Bar Value-->
    <mx:HBox width="100%">
        <mx:Label text="value { sliderBarValue.value }" width="{ LABEL_COL_WIDTH }" />
        <mx:HSlider
            id="sliderBarValue"
            minimum="0" maximum="1" value="{ barSlider.value }"
            liveDragging="true"
            change="{ barSlider.value = sliderBarValue.value }" />
    </mx:HBox>
    
    <mx:HRule width="100%" />
    
    <!--Color Full-->
    <mx:VBox width="100%">
        <mx:Label text="Color Full" />
        <pg:RRGGBB 
            id="colorFull"
            defaultRR="0" defaultGG="255" defaultBB="0"
            change="{ barSlider.barColorFull = colorFull.color }" />
    </mx:VBox>
    
    <mx:HRule width="100%" />
    
    <!--Color Empty-->
    <mx:VBox width="100%">
        <mx:Label text="Color Empty" />
        <pg:RRGGBB 
            id="colorEmpty"
            defaultRR="50" defaultGG="50" defaultBB="50"
            change="{ barSlider.barColorEmpty = colorEmpty.color }" />
    </mx:VBox>
    
</mx:Application>