Question

anybody know how to make a custom hslider in Flex 4 (spark) with two thumbs? Since Flex 4 the thumbcount property of the slider component isn’t longer available (at the mx component it was easily to set). I have to style the track and the thumbs.

A tutorial would be nice.

thx,
tux.

Answer 1

I don’t have a full tutorial for you but here are the first few steps in creating a custom hslider component. Hope it helps.

Start by looking at the hslider skin which is made up of 2 parts, a thumb and a track:

<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
              skinClass="spark.skins.spark.HSliderTrackSkin" />
<s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
              skinClass="spark.skins.spark.HSliderThumbSkin" />

Now, create a new skin except give it two buttons:

<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
                  skinClass="spark.skins.spark.HSliderTrackSkin" />
<s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
                  skinClass="spark.skins.spark.HSliderThumbSkin" />
<s:Button id="thumb2" top="0" bottom="0" width="11" height="11" 
                  skinClass="spark.skins.spark.HSliderThumbSkin" />

Create a new component that extends HSlider and call it something like MultiButtonSlider. Override the partAdded() function and grab a reference to thumb2 when its added.

override protected function partAdded(partName:String, instance:Object):void{
if(partName == "thumb2"){
    thumb2 = instance as Button;
}
}

Hope this starts you off in the right direction. Don’t forget to set the MultiButtonSlider.skinClass = “YourNewSkin”

Next steps would be to make it draggable and convert its point to a value. See the HSlider.pointToValue() function.