The following example shows how you can customize several properties and styles in the Flex HSlider control.
Full code after the jump.
<?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();">
<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>
View source is enabled in the following example.
Can we change the track height for the HSlider?
Aasim,
I don’t believe there is a style/property specifically for track height. You can probably just create a custom skin though. If you think it is a bug, or want to file an enhancement request, you can go to http://bugs.adobe.com/flex/ and submit it to the official Flex bug base.
Peter
Thanks Peter,
just another question…
a hslider track bar has a small offset of around 3 pixels from the left and the right side, can this be reduced?
Aasim,
Not sure. I believe the Slider class (mx.controls.sliderClasses.Slider) has a “thumbOffset” style which may be what you are looking for. If not, you may have to try asking on Flexcoders and see if somebody on there knows.
Sorry,
Peter
Is there a way to change the order of the min max positions on the slider so that the max value is on the left and the min value on the right?
Pedro,
There isn’t a way I know of, although you could probably extend the Slider (or HSlider/VSlider) class and add the functionality. Either that or just use the labelFunction and handle all the value conversions behind the scenes manually. You could always try asking on the Flexcoders list, I’m sure somebody out there has attempted this before.
Sorry,
Peter
Note: These questions always work better if I already know the answers. Otherwise I just look kind of silly. ;)
Hi Peter
Please help me in achieving the following:
“To drag the region between the thumbs, if the HSlider has two thumbs”.
Do we have any option in HSlider?
Or
Do i need to rewrite HSlider which will implement Slider?
Thanx in advance
~Anand
Anand,
Something like Doug McCune’s “Draggable Slider Component for Flex“?
Peter
I know there is a way to set the toolTip for the slider, but do you know of a way to override the dataTip to display something else?
I’m using the DisplayShelf component to display images, and as the slider moves, I want to update the dataTip with the name or caption of the image.
Any ideas?
Erich,
Do either of the following entries help?
http://blog.flexexamples.com/2007/07/18/formatting-data-tips-in-a-slider/
http://blog.flexexamples.com/2007/07/23/formatting-multiple-data-tips-in-a-slider/
Peter
Peter,
The first link had exactly what I needed - thank you!!!
-Erich-
Hi,..
Is it possible to rotate the silder label text??
I tried with applying styles like
HSlider
{
label-rotation:90;
}
and
HSlider
{
label-style-name:mySliderStyle;
}
.mySliderStyle
{
rotation:90;
}
But both of them didnt work