Table of contents for flex-tips

1. FlexTips
2. FlexTip: mx:Text vs. mx:TextArea
3. FlexTip: XMLSocket connect() after disconnect from server
4. FlexTip: Problem with masks and scalable Flash
5. FlexTips: How to add Bitmap to UIComponent
6. FlexTip – Stop displaying Focus
7. FlexTip: Preventing CheckBox selection with Key.SPACE
8. FlexTip: WordWrap for mx:Text
9. FlexTip: Add Thumbs to Mx:Slider programatically
10. AS3 Conditional Breakpoint – enterDebugger()

I have some new Flex Tip for you. Maybe you have found it already if you have tried add new thumbs to Mx:Slider (HSlider, VSlider) programatically. There can be various “small” problems. Or maybe there is just another way

What I’ve tried is increase thumbCount property and add new value to values property. But there can be problems, if you did not set snapInterval property or how you insert new value.

I have created examples with 3 different ways of adding new thumbs to the horizontal slider. There can be more, but I want to show you just these 3 different way of how to do it.

In all examples sliders starting value as follows:

• minimum = 0
• maximum = 0
• thumbCount = 2
• values = [0,1]

I’m catching MouseEvent.CLICK event on these sliders, and add new thumb. After click you can check last added value, and values property of each slider for you control, what’s inside. Let’s try example and after I will explain difference in these 3 different ways fo adding new thumb to slider.

The first example I’m adding new value to the values property, which is Array by simple slider.values.push(newValue). Problem is that, when you push value e.g. 0.5 to array [0,1], values will be [0,1,0.5] it’s not sorted (slider has not sorted it by itself). It’s interesting how slider recompute it’s values. Just try it in example

private function handleAddWrongPoint(e:MouseEvent):void
{
	var newValue:Number = idWrongSlider.minimum + (e.localX / idWrongSlider.width) * (idWrongSlider.maximum - idWrongSlider.minimum);
	newValue = int(newValue * 100)/100;
	if (!(e.target is SliderThumb))
	{
		latestWrong = newValue;
		idWrongSlider.thumbCount++;
		idWrongSlider.values.push(newValue);
		idWrongSlider.invalidateProperties();
		trace('Wrong: ' + e.localX + " , new: " + newValue + " values: " + idWrongSlider.values);
 
		update();
	}
}

In second example there is no snapInterval set, and it seems, that causes more interesting problems. Values are now greater than maximum (1), try add few thumbs by clicking on 2nd slider and you can end up with such values property [0,1,2,3,4,5,6,7,0.6]. Really don’t why

private function handleAddWrongPoint2(e:MouseEvent):void
{
	var newValue:Number = idWrongSlider2.minimum + (e.localX / idWrongSlider2.width) * (idWrongSlider2.maximum - idWrongSlider2.minimum);
	newValue = int(newValue * 100)/100;
	if (!(e.target is SliderThumb))
	{
		latestWrong2 = newValue;
		idWrongSlider2.thumbCount++;
		idWrongSlider2.values.push(newValue);
		idWrongSlider2.invalidateProperties();
		trace('Wrong: ' + e.localX + " , new: " + newValue + " values: " + idWrongSlider2.values);
 
		update();
	}
}

In 3rd examples all is ok, because I’ve set snapInterval property to 0.01 and I’m adding new values correctly sorted

private function handleAddCorrectPoint(e:MouseEvent):void
{
    var newValue:Number = idCorrectSlider.minimum + (e.localX / idCorrectSlider.width) * (idCorrectSlider.maximum - idCorrectSlider.minimum);
    newValue = int(newValue * 100)/100;
    if (!(e.target is SliderThumb))
    {
        latestCorrect = newValue;
        idCorrectSlider.thumbCount++;
        var arr:Array = idCorrectSlider.values;
        arr.push(newValue);
        idCorrectSlider.values = arr.sort();
        idCorrectSlider.invalidateProperties();
 
        trace('Correct: ' + e.localX + " , new: " + newValue + " values: " + idCorrectSlider.values);
        update();
    }
}

Full source to this examples is included in Download Section (you will see it just as subscribed member) of our Coaching Program Forum on Flexets.com (My own company).