Slider Track and Thumb Skinning

This example derives from a couple questions.  The first was how to create a Slider track with sort of a blue pearl look, a permanent ‘highlight’ in the middle, and corresponding changes to the look of the data tooltip.  The second question pertained to using a custom Path to draw a new Slider thumb shape.  Combining these two requests provides an opportunity to explore skinning an existing Spark component.

Each component documents its default skin skin class, which in turn defines skin parts and their associated classes.  Create new MXML Skin classes as copies of the default skin classes.  This provides a baseline class for modifying the skin.  Change the skin class references to point to the custom skins and you’re in business.

I’m not sure what a light blue pearl theme should look like, so I tried something with a radial gradient in tandem with chromeColor (set via styling).  To illustrate using a Path for the thumb, I chose a simple triangular shape.  I might replace this with something using a combination of lines and quad. Beziers in a future modification.

This screenshot contrasts the default and custom skin.

Dragging the top slider adjusts the height of the custom skinned slider so you may view how the skin varies with slider height.

View demo.

View source.


One thought on “Slider Track and Thumb Skinning

  1. Ez Jim

    I really do hope that once Hero is out and with the compiler fix in 4.5 ( that Adobe makes a move away from defining styles inline for the next release and therefore making skins much less flexible than they should be.

    You really shouldn’t have to make a new HSliderSkin, instead using descendant and id selectors in external CSS to apply styles to the skinParts inside it. Due to the skinClass being defined inline, this just isn’t possible.

Comments are closed.