Question

I have a simple slider, with only 3 options. It seems strange to force the user to drag the small thumbnail on the slider, when it would be a lot easier to click one of the 3 actual labels by the side of the slider. Does anyone know how to accomplish this?

Answer 1

This is a cool problem.

The Label object used by Slider turns out to be a subclass of Label (called SliderLabel). So, probably the best approach would be to subclass Slider and add event listeners to the labels.

I think you could successfully add event listeners in either the commitProperties method or the updateDisplayList method. I’m not sure if one would be preferable to the other, but commitProperties seems like the more correct choice.

So, in your subclass of Slider:

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’d want a custom event there, rather than dispatching a regular Event, so you could include the name/id/value of the label.

Also, you may want to put in a ‘dispose’ method to remove the CLICK event listener from the labels when the Slider is removed from the stage. It’s not an issue if you aren’t going to be removing the Slider, but if you are, what I normally do is create a method called dispose and put all my manual removal logic there (removing event listeners, unwatching/removing ChangeWatchers). Then I assign a listener to the component’s REMOVED_FROM_STAGE event and call the dispose method from that listener.