Customing the Flex HSlider and VSlider controls

by Peter deHaan on September 11, 2007

in HSlider, Slider, VSlider

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

Full code after the jump.

View MXML

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

{ 25 comments… read them below or add one }

1 Aasim September 12, 2007 at 8:41 am

Can we change the track height for the HSlider?

Reply

2 peterd 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 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 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 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 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 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 March 8, 2008 at 10:18 am

Anand,

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

Peter

Reply

9 Erich Beyrent 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 March 19, 2008 at 1:49 pm
11 Erich Beyrent March 20, 2008 at 5:24 am

Peter,

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

-Erich-

Reply

12 Shameer Salim 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. 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 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. 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 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 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 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 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 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 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 Julia August 19, 2009 at 8:15 am

Oh, sorry .. I went to found the solution…

.myLabelStyle {
    color: white;
}

Reply

23 Anonymous November 4, 2009 at 11:07 pm

Could u please explain how to highlight the lable based on the Hslider value.

24 lynxoid 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

25 Eugene Se 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

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can 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

Previous post:

Next post: