Slider Track Click And Drag

January 7th, 2009 by Unknown Morphician

The default Flex Slider component allows you to click the track to update the thumb position but does not begin the dragging of the thumb. I wanted that drag behavior but didn't want to write my own Slider from scratch. I love to read code so I looked at the mx source and found a simple way to add that functionality in a Slider subclass.

In mx.controls.sliderClasses.Slider, there is a trackHitArea var who's mouseDown events are registered to a track_mouseDownHandler() method. That private method has all the logic to update the position of the thumb. But for dragging, that is initiated by the thumb (SliderThumb class), not the trackHitArea.

Click here for a small app that shows the original Slider and the new Slider subclass side-by-side. Right-click for source.

I ended up replicating the track_mouseDownHandler() method and changing the end of the logic to dispatch the mouseDown event through the thumb object itself to initiate dragging (and maintain the original dragging behavior as if you clicked directly on the thumb). Luckily there were enough public/protected/mx_internal namespaced methods to maintain the same logic from the original track_mouseDownHandler(). I also added an allowTrackClickDragSliderThumb Boolean to be able to maintain the original track click behavior.

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • DZone
  • Fark
  • LinkedIn
  • Live
  • Reddit
  • Slashdot
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Bookmarks
  • RSS
  • email

4 Responses to “Slider Track Click And Drag”

  1. Daniel says:

    Dude, thanks for posting this! EXACTLY what I needed, and my solution was not as nice.

  2. Alexandr says:

    Thanks a lot for a great solution!

  3. James says:

    This is one of those “wish it was already there” features. Awesome and thanks!

  4. Greg says:

    Totally awesome and works like a charm. Thanks!

Leave a Reply