Have Geek Brain

How to make slider labels interactive [Flex 3]

I have a simple slider with three options. It seems odd to get the user to drag a small thumbnail onto the slider when it would be much easier to click one of the three actual shortcuts from the side of the slider. Does anyone know how to do this?

+1


a source to share


2 answers


This is a cool problem.

The Label used by the Slider turns out to be a Label subclass (called the SliderLabel). As such, subclassing Slider and adding event listeners to the labels is probably the best approach.

I think you could successfully add event listeners to either the commitProperties method or the updateDisplayList method. I'm not sure if the other was preferable, but commitProperties seems to be a better choice.

So, in your Slider subclass:

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

    for(var i:int = 0; i < labelObjects.numChildren; i++)
    {
        if(!SliderLabel(labelObjects.getChildAt(i)).hasEventListener(MouseEvent.CLICK))
        {
            SliderLabel(labelObjects.getChildAt(i)).addEventListener(MouseEvent.CLICK,sliderLabelClickListener);
        }
    }
}


and then maybe something like this for sliderLabelClickListener

:

private function sliderLabelClickListener(e:MouseEvent):void
{
    dispatchEvent( new SliderLabelClickEvent(e.target) );
}

I think you need a custom event there, instead of sending a regular one Event

, so that you can specify the name / id / value of the label.

Also, you might want to use the "dispose" method to remove the CLICK event listener from the labels when the slider is removed from the scene. This is not a problem unless you are going to remove the slider, but if you are, what I usually do is create a method called dispose

and put all my manual removal logic (removing event listeners, unblocking / removing ChangeWatchers). Then I assign an event to the listener REMOVED_FROM_STAGE

and call the method dispose

from that listener.

+1


a source


Are you sure the slider is the best component to use in this case? Generally speaking, sliders should be used when the user has a large range of adjacent options to choose from, where the precision of the user's selection doesn't matter much (for example, a volume slider with 51% volume rather than 50% really won't matter much).



If you only have three options, and the user is allowed to select one of those three options, I would suggest using either a combo box or a radio button group.

0


a source






More articles:


All Articles