January 25th, 2011

Spark Slider with Track Highlight

I’m working on a Playbook application and wanted to recreate the VolumeSlider provided by the QNX ActionScript Library with Flex.

When I tried to convert my Illustrator into Skin for a HSlider in Adobe Flash Catalyst, noticed that the Spark Slider has no Track Highlight. The old MX Slider contains an optional Track Highlight, which can be switched on/off with the parameter “showTrackHighlight”. It was also possible to change color and skin of the Track Highlight on the MX Slider

I extended the original Spark Slider to add a Track Highlight using the Spark Skinning Architecture. At the moment ,I’m working to support the toggling of the visiblity based on the parameter “showTrackHighlight” and the possiblity to change the color of the highlight.

The source code of the sliders is available on GitHub.

With a little bit of modification on the skins, my slider could look like the screenshot below.

Playbook Volume Slider based on modified Spark HSlider with Highlighted Track

Update: 27.04.2011

The latest version supports the toggling of the Track Highlight visiblity using the property showTrackHighlight and changing the Track Highlight color using the property accentColor. The default color of the Track Highlight using the themeColor. Everything works like the old MX Slider. Also I fixed the problem with the clicking the Track Highlight.

12 Responses to “Spark Slider with Track Highlight”

  1. Victor says:

    Thanks for this component!

  2. Matt Nowicki says:

    Love it — I too have been trying to build a nice slider for mobile use. I really like the slider shown in the screenshot – is the code for that available?

  3. jc says:

    Great control. but it have a serious issue. The click on track feature is now broken with the highlight. Notice if you click on the track, the thumb will jump there for mx and spark slider. If you click on the highlight track in the new control, it will not work.

  4. wingderecho says:

    This is a great component but… there is some way to do this without extend the original Spark HSlider?

  5. Patrick says:

    @jc You’re right. Maybe I find on gthis weekend the time to fix the problem.

  6. Patrick says:

    @wingderecho You can add the logic for the highlight into the skin and use the skin with the original Spark HSlider. I personally prefer the seperation between visual look and component logic.

  7. JC says:

    Great work Patrick. Thanks for fixing the issue. I just got Flex4.5 and their Spark:HSlider still don’t have any highlight support sad…. May be you can sell your code to Adobe 🙂

  8. JC says:

    Hi Patrick

    FYI. I was playing with your control. I notice the track highlight will never go away 100%. If you change your thumb to like a triangle or move your thumb up from the track. You will notice the The track highlight actually starts a bit further than 0. We have a thicker track so it is more obvious for us. It is probably some easy coordinate fix somewhere but I did not go through the code in details.

  9. JC says:


    I go through the code here and the adobe Spark HSlider code in more details. I notice the drawing calculation routine take the width of the thumb as a offset. In My case, I want the highlight start at exactly 0. So I have to set the thumb width to “0”. It’s sounds strange(my track thumb is actually an arrow graphic of width 15 pointing at the trackhighlight edge) but that’s how it works.


  10. Patrick says:

    @JC The reason why the highlight will not go a way is that I have implemented the length of the track highlight based on the middle of the thumb. I have done it by purpose, because the track highlight has to end in the middle of the thumb caused by potential shapes of the thumb.

    I think you solve your problem using a skin for the track highlight using a scale-9-grid (static FXG) with an offset on one side or you can use fixed width and height together with correct positioning of skin parts using the offset (dynamic FXG in MXML file).

    That’s the way, I created the volume slider of my PlayBook application, which you see above.

    I hope that solves your problem and clears the idea why I have implemented my solution in this way.

  11. Reny Mohan says:

    Great job! Thanks a lot for this component 🙂

  12. Faisal Sarfraz says:

    Great component but have an issue, I created custom s:SparkSkin but that is not working with this new spark component. Can you please guide how to use s:sparkskin with this