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.

Advertisement