Preventing a user from clicking the track on an HSlider control in Flex

The following example shows how you can prevent a user from clicking on the track of a Flex HSlider control by setting the Boolean allowTrackClick property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/ -->
<mx:Application name="HSlider_allowTrackClick_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="allowTrackClick:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HSlider id="slider"
            allowTrackClick="{checkBox.selected}" />
 
</mx:Application>

View source is enabled in the following example.

You can also set the allowTrackClick property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/ -->
<mx:Application name="HSlider_allowTrackClick_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                slider.allowTrackClick = checkBox.selected;
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="allowTrackClick:">
                <mx:CheckBox id="checkBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HSlider id="slider" />
 
</mx:Application>

5 thoughts on “Preventing a user from clicking the track on an HSlider control in Flex

  1. I would encourage webmasters to not use this option on the videos because it is annoying!! I can see where it would be necessary though. For example if you were doing an online defensive driving course you would have to force your users to sit down and watch the entire video.

  2. Extending the slider class and adding:

    override protected function track_mouseDownHandler(event:MouseEvent):void
    {
    // do nothing
    }

    Does seem to do the tric.

Comments are closed.