Flex Better Sliders
I find that the default sliders have a few minor usability issues a) the thumb is too small and b) the hit area of the the thumb is too small. Perhaps I just need new glasses or a bigger screen?
You could skin a slider and change the thumb graphic but it's just as easy to fix with a little actionscript.
Here's the code:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Text text="I think this blog is:" />
<mx:HSlider minimum="1" maximum="5" labels="[Poor,,Average,,Excellent]" width="300" value="3" snapInterval="1" tickInterval="1" creationComplete="bigger(event)"/>
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.HSlider;
import mx.core.UIComponent;
private function bigger(event:FlexEvent):void {
var slider:HSlider = event.target as HSlider;
var thumb:UIComponent = slider.getThumbAt(0);
thumb.scaleX = 1.3;
thumb.scaleY = 1.3;
var hitArea:Sprite = new Sprite();
hitArea.visible = false;
hitArea.mouseEnabled = false;
hitArea.graphics.beginFill(0x000000, 1.0);
hitArea.graphics.drawRect(-thumb.width/2,0,thumb.width*2, thumb.height);
hitArea.graphics.endFill();
thumb.addChild(hitArea);
thumb.hitArea = hitArea;
slider.invalidateDisplayList();
}
]]>
</mx:Script>
</mx:Application>
To make the thumb bigger it's a simple matter of changing the thumb's scale plus you need to call invalidateDisplayList otherwise the thumb won't be in the correct position.
To change the hit area take a few more steps, you need to draw the shape you want to be the hit area and assign this new shape to the hitArea property of the the thumb. Note the couple of extra lines to make the shape invisible, add it as a child of the thumb and stop it reacting to mouse events if any of these are omitted you won't get quite what you want.
thumb.width = 50;
thumb.height = 14;
thumb.width=50; thumb.height=14; <=== do not work.