One of the great things about the new component architecture in Flex 4 isn’t just that you can radically customize any component. It’s that it’s so easy to do. I’m not even sure it would be possible to customize a Flex 3 slider to do what the one below does – without monkey patching. If you could it would be a huge hassle. But with Flex 4 I just slapped it together.

view source at your own risk :)

A few issues
Help me out if you can because one thing that I couldn't figure out is how to get the component values - HSpectrumSlider.as - out to the slider thumb. You can see that there is a skin class for the component - SpectrumSliderSkin.mxml. In that skin class we have access to the hostComponent. However, the slider thumb does not have access to the data in HSpectrumSlider.as because its hostComponent is <s:Button>.

I got around this problem by using my MCP class to dispatch events that I could listen for in the SpectrumThumb.mxml file. It ain't pretty but the shit works and that's what I'm after.

I'd love to hear from you if you know of a way to get the data from HSpectrumSlider out to the SpectrumThumb.mxml while staying within the component architecture.

Sliding through the spectrum
The color spectrum is created by changing the Hex RGB values one at a time. Starting out with #0000FF - blue - I increase the green value for the first 25% of the slider value ending up with #00FFFF. Then for the next 25% I decrease blue to zero giving #00FF00. Then red to FF giving #FFFF00 and finally green to 0 leaving us at #FF0000. The code looks like this:

percent = this.value / ( this.max - this.min );

if( percent < 0.25 ) { 	// green: 0 --> 255
	r = 0;
	g = 255 * ( percent * 4 );
	b = 255;
} else if( percent < 0.5 ) { 	// blue: 255 --> 0
	r = 0;
	g = 255;
	b = 255 * ( 0.5 - percent ) * 4;
} else if( percent < 0.75 ) { 	// red: 0 --> 255
	r = 255 * ( percent - 0.5 ) * 4;
	g = 255;
	b = 0;
} else {
	// green: 255 -> 0
	r = 255;
	g = 255 * ( 1 - percent ) * 4;
	b = 0;
}

rgb = ( r << 16 | g << 8 | b );

What do you think?