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.
<?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.
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
Jolyon,
I’ve filed a bug in the public Flex bug base at http://bugs.adobe.com/jira/browse/SDK-15529.
Peter