Setting the tick thickness on a Slider control in Flex at Flex Examples

May

Setting the tick thickness on a Slider control in Flex

By peterd

Categories: HSlider and Slider Tags: HSlider, Slider, tickInterval, tickThickness.

The following example shows how you can set the thickness of a tick on a Flex HSlider control by setting the tickThickness style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/06/setting-the-tick-thickness-on-a-slider-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Form>
        <mx:FormItem label="tickThickness:">
            <mx:HSlider id="slider"
                    minimum="1"
                    maximum="4"
                    liveDragging="true"
                    snapInterval="1"
                    tickInterval="1"
                    tickThickness="{slider.value}"  />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

2 Responses to “Setting the tick thickness on a Slider control in Flex”

Feed for this Entry View blog reactions

1 Jolyon May 9th, 2008 at 2:53 am

Visually it looks like the tick is not centered when it’s drawn. ie, in your example when it gets thicker is moves to the left.

When you look at the source for Slider, HSlider’s super class in the layoutTicks method there is an XOffset value which should be compensating for this. Annoyingly there’s no way to extend this and fix this method as it’s private.

From what I can tell, short of ripping the code out and re-writing your own, there’s not a lot you can do.

Jolyon
2 peterd May 9th, 2008 at 5:13 pm

Jolyon,

I’ve filed a bug in the public Flex bug base at http://bugs.adobe.com/jira/browse/SDK-15529.

Peter