Entrepreneur Geek

Nirav Mehta on life, technology and future

Intelligent Time Duration / Estimate Slider in Flex (inspired from The Hit List)

without comments

I wrote yesterday that I am working on a time estimate slider like The Hit List. It’s finally ready!

Here’s how it looks in The Hit List.

Smart Estimate Slider in The Hit List

Smart Estimate Slider in The Hit List

And here’s how it looks in my Flex application:

Smart Estimate / Duration Slider in Flex

Smart Estimate / Duration Slider in Flex

Want to see how it works? Here’s the live example.

Want the source code? Download source MXML here.

What does this slider do?

  • Drag the slider to select estimated hours / duration.
  • The drag thumb will snap differently between 0h to 1h (every 15 minutes), 1h to 1d (every 15 minutes, but within ticks), and 1d to 1w (every 2 hours).
  • Can set the default value for slider
  • Value of slider is converted to hours
  • Can define hours in a day and days in a week
  • Estimation slider shows up when focus goes in the text field. Hides when you click Done button (or another screen element that can get focus). But not when you focus on the slider itself.

It was a challenge, and I loved solving it. Had to hard code some calculations, but it’s still flexible. Allows customizing hours in a day and days in the week. This example also demonstrates Number Formatter, and how to handle focus events.

Still haven’t converted hours into a more readable text (e.g. 40h into 1w). But that’s for later.

Here’s another thing that you may like! Card Deck animation like The Hit List!

Do you like it? How would you have done it?

Related posts:

  1. Building a time estimate slider like The Hit List The estimates slider in The Hit List is smart. Its...
  2. Card Deck Animation in Flex I was trying out a GTD application the other day...
  3. Flex Regular Expression Online Testing / Learning Tool When it comes to Regular Expressions, I start feeling giddy....
  4. Notification Components in Flex If you are building a Flex application, you may need...
  5. Auto Complete Text Component for Flex Was looking for ways to skin a combobox and found...

Written by Nirav

April 16th, 2009 at 4:21 pm

 

Leave a Reply