16 Jul 2008 03:35 pmAdventures in Flex
Custom width and height of Flex Slider thumb

In Flex, if you have a custom slider thumb, it will always be scaled to a set size that Flex wants (I think 20×20).

For example,

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundColor="#ffffff"
        width="300" height="100">
    <mx:HSlider thumbSkin="@Embed(source='resources/images/mario8bit.png')" />
</mx:Application>

would give you this:

The Flash plugin is required to view this object.

To fix this, I wrote a class that extends SliderThumb and sets to the measured size of the skin image:

package controls.sliderClasses {
    import mx.controls.sliderClasses.SliderThumb;
    import mx.core.mx_internal;
   
    use namespace mx_internal;
   
    public class FlexibleSliderThumb extends SliderThumb {
       
        override protected function measure():void {
            super.measure();
            measuredWidth = currentSkin.measuredWidth;
            measuredHeight = currentSkin.measuredHeight;
        }
    }
}

Now, modifying the mxml file like so:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundColor="#ffffff"
        width="300" height="100">
    <mx:Script>
        <![CDATA[
            import controls.sliderClasses.FlexibleSliderThumb;
        ]]>
    </mx:Script>
    <mx:HSlider
        thumbSkin="@Embed(source='resources/images/mario8bit.png')"
        sliderThumbClass="{controls.sliderClasses.FlexibleSliderThumb}"/>
</mx:Application>

gives you this:

The Flash plugin is required to view this object.

23 Responses to “Custom width and height of Flex Slider thumb”

  1. on 16 Jul 2008 at 6:04 pm monkey said …

    You should provide code for a sample app and maybe a failure app which shows the problem you’re trying to fix.

  2. on 13 Aug 2008 at 7:19 pm Frank Lam said …

    done

  3. on 24 Sep 2008 at 2:26 am Bob said …

    Awesome! Thanks!

  4. on 11 Dec 2008 at 1:53 am adekunle said …

    i couldn’t change my thumb. when i used the code above, i was getting this error message “cannot resolve attribute thumbskin for component type mx.controls.HSlider”. I’m using Adobe flex 2. I will appreciate your quick response.

  5. on 20 Dec 2008 at 3:38 pm Frank Lam said …

    Need more info. How are you using it? (i.e. what is your mxml declaration?)

  6. on 26 Jan 2009 at 9:34 am Confluence: Cynergy Development said …

    Flex Gotchas…

    Weird behavior / known bugs in Flex and corresponding workarounds live here. My WebService call doesn’t do anything\! You invoke a method / operation on a WebService. Nothing happens…….

  7. on 02 Feb 2009 at 10:12 am myxus said …

    Thx! Works perfectly.

    I have another question: sometimes when dragging a thumb, it becomes smoothy because of fractional coordinates. Is it possible to use some solutions like this?

    override public function set x ( value : Number ) : void {
    super.x = value;
    if ( parent ) {
    var p : Point = new Point ( x, y );
    parent.localToGlobal ( p );
    p.x = Math.round ( p.x );
    p.y = Math.round ( p.y );
    parent.globalToLocal ( p );
    if ( p.x != x ) { super.x = p.x; }
    if ( p.y != y ) { super.y = p.y; }
    }
    }

    It doesn’t work, it isn’t even ever called.

  8. on 05 Mar 2009 at 6:13 pm Frank Lam said …

    @myxus

    If you want it to “stick” at certain values you can use the snapInterval property on the Slider class. I know this is probably not what you’re asking exactly, but I’m not sure I understand the question :)

  9. on 13 Apr 2009 at 12:44 pm Ahmed Malik said …

    Thank you so much for sharing it, never thought it would be so easy :)

  10. on 18 Apr 2009 at 7:46 am Yoonbae Cho said …

    Very nice solution. Thanks!

  11. on 03 Jun 2009 at 11:49 pm Szymon said …

    Thanks a lot for sharing! Just what I needed!

  12. on 19 Aug 2009 at 2:17 pm Troy said …

    Very helpful, thanks

  13. on 22 Aug 2009 at 12:43 pm Leandro said …

    Great I was looking for this!!

    Is there a way to extend the width of the highlight track between two thumbs?

    Thanks

  14. on 28 Aug 2009 at 2:03 pm Aquarian said …

    Thanks.. is there any way that we can display the current value of the slider on the thumb.

  15. on 23 Sep 2009 at 10:11 am Nedu said …

    Thanks a lot dude! you saved My life

  16. on 11 Dec 2009 at 3:16 am Erik said …

    Thanks alot! Exactly what I was looking for.

    Just a quick note for Flex newbies (like myself), I put the FlexibleSliderThumb class code in a file named FlexibleSliderThumb.as in a folder named /controls/sliderClasses/ in the src folder of my Flex project for the import to work. Maybe there’s another way, maybe not, but this, at least, works ;)

    /erik

  17. on 11 Feb 2010 at 8:52 am Ash McConnell said …

    Great tutorial thanks! For some reason its not working for me in CSS, but it works if I put it directly in the HSlider tag.

    e.g.

    HSlider{
    …VARIOUS SKINS…
    sliderThumbClass:”{includes.BigThumbClass}”;
    }

    Doesn’t work

    But: -

    Does work.

    Any ideas what I could be doing wrong?
    Thanks!
    Ash

  18. on 12 Feb 2010 at 12:19 pm Frank Lam said …

    @Ash:

    The CSS you have doesn’t work because “sliderThumbClass” is a property and not a style. One solution would be to subclass HSlider.

    e.g.:

    package {
    import mx.controls.HSlider;

    public class MySlider extends HSlider {
    public function MySlider{
    sliderThumbClass = FlexibleSliderThumb;
    }
    }
    }

    Then, instead of using HSlider, use your new slider..

    In your CSS, you can just define the image you want there.

    MySlider {
    thumbSkin: Embed(”blahblah.png”)
    }

  19. on 15 Feb 2010 at 8:08 am Munib said …

    Thanks, it works.
    What if I want to change height and width? Height and width could be different for each instance.

  20. on 15 Feb 2010 at 8:13 am Munib said …

    One more thing, with respect to query no. 18. What if my blahblah.jpg size is 10X10 and i wanted to give size 15X15. how to do that? Dont want to hardcode this number in FlexibleSliderThumb.as

  21. on 20 Feb 2010 at 2:54 am Frank Lam said …

    @Munib:

    I suppose you could create some variables called, say, thumbWidth and thumbHeight, initialize them to 0, and change the lines in measure to read:

    measuredWidth = thumbWidth == 0?currentSkin.measuredWidth:thumbWidth;
    measuredHeight = thumbHeight == 0?currentSkin.measuredHeight:thumbHeight;

    I haven’t tried this, but it will probably work…

  22. on 24 Mar 2010 at 5:54 am sebb said …

    Hey thx for the info, worked like a charm

  23. on 19 May 2010 at 5:38 pm amy said …

    Thanks, this was really helpful!

Trackback This Post | Subscribe to the comments through RSS Feed

Leave a Reply