Flex 4 Slider with two thumbs

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.

Answer 2

Patrick Mowrer has a free one over on GitHub: https://github.com/pmowrer/spark-components

I was able to use it without much of a problem in a recent project. The component doesn't expose (to MXML) all the properties that the Spark one does (for example, dataTipFormatFunction is absent), but one can still access and customize them through custom skinning.

Answer 3

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)"/>