Flex Graduated Slider

I ran across this problem recently…

I needed to create a slider that didn’t change in a uniform way. It was different for each third of the slider. The first third changed evenly from 0 - 25,000. The second third from 25,000 - 100,000. The last third from 100,000 - 10,000,000.

Here are the basic steps that I took:

1. Create a slider with minimum 0 and maximum 10,000,000
2. Create a handler for the change event
3. Write a whole lot of math in the change event

I’ll let you read over the application code at the link below. Here’s a really quick view of the function that handles the slider changing:

private function handleSliderChange():void
{
var thumbPercentage:Number = slider.value / slider.maximum;
var newTextInputText:String = '';
var multiplier:Number;
if( thumbPercentage <= GraduatedSlider.ONE_THIRD )
{
newTextInputText = numberFormatter.format((thumbPercentage / GraduatedSlider.ONE_THIRD) * GraduatedSlider.SLIDER_ONE_THIRD_VALUE);
}
else if( thumbPercentage > GraduatedSlider.ONE_THIRD && thumbPercentage <= GraduatedSlider.TWO_THIRDS )
{
multiplier = ((GraduatedSlider.TWO_THIRDS - thumbPercentage) / GraduatedSlider.ONE_THIRD);
newTextInputText = numberFormatter.format((((thumbPercentage / GraduatedSlider.TWO_THIRDS) * GraduatedSlider.SLIDER_TWO_THIRDS_VALUE) - (multiplier * GraduatedSlider.SLIDER_ONE_THIRD_VALUE)));
}
else
{
multiplier = ((thumbPercentage - GraduatedSlider.TWO_THIRDS) / GraduatedSlider.ONE_THIRD);
//trace(multiplier);
newTextInputText = numberFormatter.format(((multiplier * GraduatedSlider.SLIDER_FULL_VALUE) + ((1 - multiplier) * GraduatedSlider.SLIDER_TWO_THIRDS_VALUE)));
}
this.sliderValue = newTextInputText;
slider.dataTipFormatFunction = sliderDataTip;
setTextInputValue();
}

View Application     View Source