Customing the Flex HSlider and VSlider controls

By Peter deHaan On September 11, 2007 · 29 Comments

The following example shows how you can customize several properties and styles in the Flex HSlider control.

<?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.

 
Tagged with: • • • • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

29 Responses to Customing the Flex HSlider and VSlider controls

  1. Aasim says:
    September 12, 2007 at 8:41 am

    Can we change the track height for the HSlider?

    Reply
  2. peterd says:
    September 12, 2007 at 9:23 am

    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

    Reply
  3. Aasim says:
    September 13, 2007 at 4:46 am

    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?

    Reply
  4. peterd says:
    September 13, 2007 at 6:58 am

    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

    Reply
  5. Pedro says:
    September 13, 2007 at 7:23 am

    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?

    Reply
  6. peterd says:
    September 13, 2007 at 10:03 pm

    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. ;)

    Reply
  7. Anand Jha says:
    March 8, 2008 at 2:40 am

    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

    Reply
  8. peterd says:
    March 8, 2008 at 10:18 am

    Anand,

    Something like Doug McCune’s “Draggable Slider Component for Flex“?

    Peter

    Reply
  9. Erich Beyrent says:
    March 19, 2008 at 1:28 pm

    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?

    Reply
  10. peterd says:
    March 19, 2008 at 1:49 pm

    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

    Reply
  11. Erich Beyrent says:
    March 20, 2008 at 5:24 am

    Peter,

    The first link had exactly what I needed – thank you!!!

    -Erich-

    Reply
  12. Shameer Salim says:
    June 2, 2008 at 7:59 am

    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

    Reply
  13. Greg K. says:
    August 15, 2008 at 7:45 am

    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?

    Reply
  14. peterd says:
    August 15, 2008 at 10:32 am

    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

    Reply
  15. Rogier S. says:
    December 24, 2008 at 5:29 am

    @Greg:

    You can set the labeloffset to accomplish this:

    <mx:VSlider labels="['start', 'finish']" labelOffset="10" />

    Maybe not pretty, but it works…

    Reply
  16. Ian says:
    June 12, 2009 at 9:30 am

    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

    Reply
  17. Peter deHaan says:
    June 12, 2009 at 7:15 pm

    Ian,

    You can listen for the change event to detect when the selected value has changed and then get the current thumb value.

    Peter

    Reply
  18. Ian says:
    June 15, 2009 at 2:29 am

    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

    Reply
  19. Peter deHaan says:
    June 15, 2009 at 7:00 am

    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

    Reply
  20. Peter deHaan says:
    June 15, 2009 at 7:05 am

    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

    Reply
  21. Julia says:
    August 19, 2009 at 8:09 am

    Hello there,

    I just can’t find any information about changing the color of the Slider labels.
    Do I have to do this by using Styles?
    I need white labels on my black background…

    kind regards,
    Julia

    Reply
  22. lynxoid says:
    December 10, 2009 at 1:38 pm

    Is there a way to make the track highlight on the right side (thumb value to max value) instead of the left (min value to thumb value)?
    Thanks

    Reply
  23. Eugene Se says:
    January 18, 2010 at 6:18 am

    If you set ‘dataTipPlacement’ to ‘left’ or ‘right’ in this example, a small horizontal line is visible under the tooltip. Is this a (known) bug? I actually have the same feature in one of my applications, but then when ‘dataTipPlacement’ is set to ‘top’ as well.

    Does anybody know how to get rid of this line?

    Thanks,

    Eugene

    Reply
  24. Monali Gandhi says:
    February 14, 2010 at 9:55 pm

    is it possible to create Date Time HSlider & how?

    Best Regards,
    Monali

    Reply
    • Peter deHaan says:
      February 15, 2010 at 7:27 am

      @Monali,

      Sure, something like this will let you use an HSlider control to select a date:

      <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init();">
 
    <mx:Script>
        <![CDATA[
            protected static const MS_IN_DAY:uint = 1000 /*ms*/ * 60 /*seconds*/ * 60 /*minutes*/ * 24 /*hours*/;
 
            protected function init():void {
                sl.minimum = new Date(2010, 0 /*January*/, 1).time;
                sl.maximum = new Date(2010, 0 /*January*/, 31).time;
                sl.snapInterval = MS_IN_DAY;
 
                sl.value = new Date(2010, 0, new Date().date).time;
            }
 
            protected function dataTipFormatFunc(ms:Number):String {
                return new Date(ms).toDateString();
            }
        ]]>
    </mx:Script>
 
    <mx:HSlider id="sl" dataTipFormatFunction="dataTipFormatFunc" />
 
</mx:Application>

      Peter

      Reply
  25. City pictures says:
    October 6, 2010 at 3:53 am

    Thanks, this is what I’ve looked for. Alternatively, you may use “data-tip-style-name” in the slider’s CSS definition to define the style for the tip.

    Reply
  26. manish says:
    December 7, 2011 at 12:16 am

    Peter, can we change the button in here with our own swf or png?

    Reply

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree