«
»

Custom Skinnable Slider Component for Adobe Flex 3

First of all let me apologize for not blogging in a while but I’ve been working on couple of interesting projects after which it was time for deserved vacation on the BlackSea’s beaches.

Anyway I needed a better looking horizontal slider for one of the projects and all of my googling got me nothing reasonable (most of the tutorials were for changing the Thumb and leaving the default TrackHighlight) so I had to figure out something. Here is my horizontal slider, it is pretty basic but you can use it as a base for your needs. Corner Radius and Background Gradients are set via CSS, width and height are flexible too. Check the example and get the source code.

To view this page ensure that Adobe Flash Player version 9.0.124 or greater is installed.

Get Adobe Flash Player

Be Sociable, Share!

Tags: , , ,

This entry was posted on Friday, August 14th, 2009 at 5:37 pm and is filed under Adobe Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

15 Responses to “Custom Skinnable Slider Component for Adobe Flex 3”

  1. Marcio Says:
    August 19th, 2009 at 10:11 pm

    Hi Peter,

    I really appreciated your custom HSlider, but I’d like to know how can I add another trackHighlight so I intend to create a movie control and this additional trackHighlight will serve like loading indicator.

    I’m starting studing Flex 3 and I’ve not enough experience to do by myself.

    Could you help me with that?

    Thanks in advance,
    Marcio

  2. Peter Says:
    August 19th, 2009 at 11:17 pm

    @Marcio – what comes in mind is to add another HSlider and hide the thumb and the track

  3. iamcoder Says:
    September 1st, 2009 at 12:57 pm

    nice post. your custom component HSlider is really good.. keep posting

  4. Prashant Says:
    October 23rd, 2009 at 9:36 am

    Thank you Peter. Great work. Really helpful for me.

  5. lei Says:
    March 5th, 2010 at 5:07 am

    cool! I didn’t see so nice custom compnent. It is the same as my 想法。

    sorry,my English no good.haha!

  6. sam Says:
    March 8th, 2010 at 10:24 am

    Thank you Peter,it’s very nice!!!!!

  7. Ram Says:
    April 28th, 2010 at 10:04 pm

    Thanks Peter,

    Very useful Component and good starting point for custom Sliders

  8. Bruno Natal Says:
    May 24th, 2010 at 5:38 pm

    Tks!

  9. Juan Ticona Says:
    August 1st, 2010 at 7:16 am

    Hey man, I wonderring, if you maybe, know how to make a component like the control of youtube player, that the you use for view the load of video and seek of video to.
    sorry for my bad english i’m spanich speeker.

  10. Vinesh Says:
    August 19th, 2010 at 2:15 pm

    Hi Peter,

    Pls Help me out

    You are too good sir, can you pls help me out in making Custom Slider Component for Adobe Flex 3 where in you have did in circle how do I make it in rectangle with transparent and number appearing as i move the slider with the colors. I mean if a am moving the slider it the TrackHighlight should be true with the color I want and with the transparent number appearing on same.

    Thank you very much!!!!!!!!!

    Regards,

    Vinesh Menon

  11. sanky Says:
    September 15th, 2010 at 4:47 am

    Thank you for your source code Peter. And all here, could anyone pls tell me how to hide the slider’s thumb and the track. I thought it would be very simple, but I don’t know how to do this. Thank you!

  12. eity0323 Says:
    April 6th, 2011 at 9:37 am

    Thanks for sharing.It’s help me.

  13. Mathan Says:
    June 21st, 2011 at 12:03 pm

    is this possible in flex4?

  14. Peter Says:
    July 6th, 2011 at 2:20 am

    @Mathan – yes a lot easier just create custom skin.

  15. huang Says:
    November 10th, 2011 at 9:11 am

    thank you peter,your Component is excellent

Leave a Reply