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
Last question is similar to a problem I’m having - can I display the VSlider track on the left of the labels? Why is there no labelPlacement property for the sliders? I think it’s a rather simple and important feature. Any way around it?
Greg K.,
Can you file a bug/enhancement request at http://bugs.adobe.com/flex/ and post the bug number here so a few of us can vote on the issue?
It seems like it would be a common use case, and possibly something that can be addressed in the Flex Gumbo components.
Peter
@Greg:
You can set the labeloffset to accomplish this:
Maybe not pretty, but it works…
Dear Peter,
is it possible to create a custom changeSlider event and get the HSlider’s thumb data via a Method which I can’t find?
Afterwards I would like to use that data to display it via labels or to do some sort of calculations with it.
Regards,
Ian
Ian,
You can listen for the
changeevent to detect when the selected value has changed and then get the current thumb value.Peter
Thanks a lot Peter,
if I understand you correctly, then I should use the SliderEvent and its CHANGE constant, f.ex.
private function sliderChangeOne():void { var StandardEvent:SliderEvent=new SliderEvent(SliderEvent.CHANGE); dates.text=StandardEvent.value.toString(); dispatchEvent(StandardEvent);in order to get a sliderThumb value such as a certain month into my textbox “dates”.
Jan
Ian/Jan,
If you only want to get the current value of the HSlider/VSlider, you can just use the “value” property to get the current slider control’s value:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Label id="lbl1" /> <mx:HSlider id="sldr1" minimum="0" maximum="11" snapInterval="1" liveDragging="true" change="lbl1.text = sldr1.value.toString();" /> </mx:Application>Or, you can use data binding:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Label id="lbl1" text="{sldr1.value}" /> <mx:HSlider id="sldr1" minimum="0" maximum="11" snapInterval="1" liveDragging="true" /> </mx:Application>Or, if you want to do it all using ActionScript:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init();"> <mx:Script> <![CDATA[ import mx.controls.HSlider; import mx.controls.Label; import mx.events.SliderEvent; private var lbl1:Label; private var sldr1:HSlider; private function init():void { lbl1 = new Label(); addChild(lbl1); sldr1 = new HSlider(); sldr1.minimum = 0; sldr1.maximum = 11; sldr1.snapInterval = 1; sldr1.liveDragging = true; sldr1.addEventListener(SliderEvent.CHANGE, sldr1_change); addChild(sldr1); } private function sldr1_change(evt:SliderEvent):void { lbl1.text = sldr1.value.toString(); } ]]> </mx:Script> </mx:Application>Peter
Shameer Salim,
I don’t think that label rotation is supported by the components. You’d probably need to extend the HSlider/VSlider control(s) and add that logic in (and make sure you always used an embedded font since device font cannot be rotated).
Feel free to file an enhancement request for label rotation at http://bugs.adobe.com/flex/
Peter