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

Answer 4

You can take a look at this topic (AS3)

Flash Range Slider Component

Answer 5

To supplement shi11i's answer, who put me on the right track, here is the full code :

package test.components

{

import flash.geom.Point;

import spark.components.Button;
import spark.components.Group;
import spark.components.HSlider;


public class HSliderTwoThumbs extends HSlider
{
    private var _value2:Number;

    [Bindable]
    public function get value2():Number
    {
        return _value2;
    }

    public function set value2(value:Number):void
    {
        _value2=value;
        invalidateDisplayList();
    }


    [SkinPart(required="true")]
    public var thumb2:Button;

    public function HSliderTwoThumbs()
    {
        super();
        //this.setStyle("skinClass", "HRangeSliderSkin");
    }

    override protected function partAdded(partName:String, instance:Object):void
    {
        super.partAdded(partName, instance);
    }


    override protected function updateSkinDisplayList():void
    {
        super.updateSkinDisplayList();

        if (!thumb2 || !track || !rangeDisplay)
            return;

        var thumbRange:Number=track.getLayoutBoundsWidth() - thumb2.getLayoutBoundsWidth();
        var range:Number=maximum - minimum;

        // calculate new thumb position.
        var thumbPosTrackX:Number=(range > 0) ? ((value2 - minimum) / range) * thumbRange : 0;
        // convert to parent's coordinates.
        var thumbPos:Point=track.localToGlobal(new Point(thumbPosTrackX, 0));
        var thumbPosParentX:Number=thumb2.parent.globalToLocal(thumbPos).x; //- distanceToSecondThumb

        thumb2.setLayoutBoundsPosition(Math.round(thumbPosParentX), thumb2.getLayoutBoundsY());

    }

}}

And here is how to use it :

    <components:HSliderTwoThumbs id="sliderTwoThumbs"                                                skinClass="test.skins.HRangeSliderSkin"
width="300"
minimum="0"
maximum="300"
value="150"
value2="100"

/>

Hope this helps.

Note : In my case I did not handle the draggability of the second cursor, as I did not not need it (it was a "read-only" component). I would be interested in seeing how you handle it, though.