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:

view plain print about
1<?xml version="1.0" encoding="utf-8"?>
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
4    <mx:Text text="I think this blog is:" />
5    <mx:HSlider minimum="1" maximum="5" labels="[Poor,,Average,,Excellent]" width="300" value="3" snapInterval="1" tickInterval="1" creationComplete="bigger(event)"/>

8    <![CDATA[
9        import mx.events.FlexEvent;
10        import mx.controls.HSlider;
11        import mx.core.UIComponent;
13        private function bigger(event:FlexEvent):void {
14            var slider:HSlider = event.target as HSlider;
15            var thumb:UIComponent = slider.getThumbAt(0);
16            thumb.scaleX = 1.3;
17            thumb.scaleY = 1.3;
19            var hitArea:Sprite = new Sprite();
20            hitArea.visible = false;
21            hitArea.mouseEnabled = false;
22            hitArea.graphics.beginFill(0x000000, 1.0);
23            hitArea.graphics.drawRect(-thumb.width/2,0,thumb.width*2, thumb.height);
24            hitArea.graphics.endFill();
25            thumb.addChild(hitArea);        
26            thumb.hitArea = hitArea;
27            slider.invalidateDisplayList();
28        }
29    ]]>

Code works in Flex 2 and Flex 3.

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.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
If you just want to make the thumb an exact size just set the height and width of the thumb rather than it's scale like so:
   thumb.width = 50;
   thumb.height = 14;
# Posted By Justin Mclean | 7/7/07 11:11 AM
Thank you, I spent the entire day yesterday trying to find a way to make the thumb bigger.
thumb.width=50; thumb.height=14; &lt;=== do not work.
# Posted By Kent S | 11/2/07 2:27 AM
You need to change the width and height were the xscale and yscale were modified in the code abobe.
# Posted By Justin Mclean | 11/2/07 7:50 AM