HSlider, Custom Label, ThumbOverlap ...

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
import mx.controls.sliderClasses.Slider;
import mx.formatters.CurrencyFormatter;
[Bindable] public var PriceMin:uint = 0;
[Bindable] public var PriceMax:uint = 25000;
public var priceFormatter:CurrencyFormatter = new CurrencyFormatter();
private function priceSliderUpdate(evt:SliderEvent):void {
// if using allowTrackClick="true" then thumbdown or thumbdrag doesn't catch changes
// allowThumbOverlap doesn't allow both sliders to be on the same value
// if the lower slider moves past the upper slider, adjust upper slider
// so that the lower slider doesn't overlap the upper slider
if (evt.thumbIndex == 0) { // the left slider is moving
if (hsPrice.values[0] > hsPrice.values[1]){
hsPrice.values[1] = hsPrice.values[0];
}
} else { // right slider is moving
// if the upper slider moves below the lower slider adjust the lower slider down
if (hsPrice.values[1] < hsPrice.values[0]){
hsPrice.values[0] = hsPrice.values[1];
}
}
hsPriceLabel.text = "Min: " + priceFormatter.format(hsPrice.values[0])+ " Max: " + priceFormatter.format(hsPrice.values[1]);
}
private function priceDataTip(item:Number):String {
// item is the value for the slider that moved
// Set the data tip based on the value of the
// selected thumb - if greater than the minimum value,
// then it's the maximum datatip
if ( item > hsPrice.values[0]){
return ("Maximum: " + priceFormatter.format(item) ); // Maximum:
} else {
if ( hsPrice.values[0] == hsPrice.values[1]){
return (String(priceFormatter.format(item))); // min = max
}else {
return ("Minimum: " + priceFormatter.format(item)); // Minimum
}
}
}
]]>
</mx:Script>
<mx:Label fontWeight="bold" text="Price"/>
<mx:HSlider id="hsPrice" allowThumbOverlap="true" thumbCount="2" values="{[PriceMin,PriceMax]}"
labels="{[priceFormatter.format(PriceMin), priceFormatter.format(PriceMax)]}"
snapInterval="1000" tickInterval="1000" allowTrackClick="true" liveDragging="true"
width="250" dataTipFormatFunction="priceDataTip"
minimum="{Number(PriceMin)}" maximum="{Number(PriceMax)}" change="priceSliderUpdate(event)" />
<mx:Label id="hsPriceLabel" text="" />
</mx:Application>