Flex 4 Slider with two thumbs

Question

Hi,

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

Hey Tux,

I had the same problem. I'm using the mx component instead of the sparks compontent for now.

<mx:HSlider x="46" y="358" minimum="1" maximum="600" snapInterval="1"
thumbCount="2" values="[1,600]" id="hsTiming" height="23" width="618" 
change="hsTiming_changeHandler(event)"/>

Answer 2

You can take a look at this topic (AS3)

http://stackoverflow.com/questions/2003598/flash-range-slider-component

Answer 3

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.