April 05, 2002

Range Slider Component

Download source
View demo


Purpose:
Sometimes user-input asks for a range of values, rather than a specific value. This component has two sliders which allow the user to physically define left and right bounds within a range of possible values. The component has a "Decimal Places" parameter which allows the user to specify the significant digits for the accuracy of the slider. The sliders will snap to values of corresponding significant digits along the value range. For example, choosing 2 decimal places for a component from 0 to 1 will snap sliders at intervals of 0.01, so that the sliders will snap to 100 possible positions on the bar. Choosing 1 decimal places from 0 to 1 will cause the sliders to snap to 10 possible positions along the bar. Registered listeners will receive a callback to a function named "onRangeSliderChanged" in the listener while the sliders are being dragged. For computationally expensive algorithms that can't execute fast enough for real-time movement, registered listeners can also handle a callback named "onRangeSliderReleased", which is called when the slider is released.

Personal Notes:
This component was originally finished in two hours, but I spent another 12 hours iteratively improving its look and feel to meet certain standards of usability. I hope the robustness and scientifically valid accuracy of this component will prove the worthiness of using Flash technology for complex information visualization and other data-intensive tasks. If the Flash community upholds standards of usefulness and usability, then components will gain enough popularity to push interface design to new levels of innovation. Thoughtfully built components will also provide web developers with fresh justifications to break away from the conservative principles of usability iconoclasts such as Jakob Nielsen, who threaten to stifle innovation in the field of human computer interaction on the web.

Background:
The concept of range sliders rather than single-value sliders comes from research on user-interface design for dynamic queries, by Ben Schneiderman. My advisor for the graduate course in information visualization is Professor Barbara Mirel at the U. of Michigan College of Engineering and formerly of Lucent Technologies.

Posted by samuel at April 5, 2002 03:40 PM
Comments

Hey Samual I saw your session at Dev Con and wanted to thank you again for all the thought you put into it and congradulate you on a job well done. I was just comming to your site to check out those sliders. Gonna buy your book later this week. I liked the first version of your site it was pretty cool. If you get a chance check out my site and shoot me a line.

later,

Jeff Jones
http://www.blink-media.com
jjones@blink-media.com

Posted by: Jeff Jones at November 4, 2002 04:42 AM

I read your book and implemented some of your ideas. Check out the customized range sliders at http://www.autoidaho.com/SearchResults.asp Everyone I talk to loves them thanks for introducing me to them. Are you going to post that sample realestate application you presented at DevCon02?

Posted by: Jeff Jones at January 23, 2003 06:48 PM

Hello

Firstly let me say how much help this site has been to my learning experience. & many thnx

I have been trying to load the Range Slider ... However when ever i compile the swf the RAnge Slider is dead in the water ... is ther something I have to do to init the component that I am over looking .. ?

I saw something once about components needing to be initiated when not on the first from or nested inside a movieClip

any advice & learned wisdom would be welcome

thnx again in advance
Mark

Posted by: Mark Wybrow at June 24, 2004 05:00 AM

Hi!

This slider is really what i've been looking for...
...but the code is not working in flash player above 6!

Do you know a fix for that?
My guess is that it's a class thing...

Thank's in advance!!

Posted by: Matt at November 28, 2007 08:30 AM
Post a comment









Enter the letters as shown in the box below:



Remember personal info?