Setting the tick thickness on a Slider control in Flex

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 thoughts on “Setting the tick thickness on a Slider control in Flex

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

Comments are closed.