Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 1 - RangeSlider

From InfoVis:Wiki
Revision as of 19:26, 30 October 2006 by UE-InfoVis0506 9927022 (talk | contribs) (→‎History and Naming: typos corrected)
Jump to navigation Jump to search
A range slider for specifying a color range
A Range Slider is a control that lets you define two values, i.e. an upper and a lower bound. For instance two values of a specific color range.



History and Naming

The Range Slider control is a UI Component which first became widely known through the use in the field of Dynamic Queries. There the Range Slider is used to select values on continuous data attributes.

A basic range slider used for dynamic queries

The upper and lower bound can be interpreted as the value range for a certain attribute. The UI component's name derives from that interpretation. Depending on the range slider's functionality one can either change the range values by dragging the two sliders to the desired position, or by moving the whole range block. Given all that, is what makes a range slider diverse and distinct from a normal slider, which allows only the input of one value (e.g. sound volume).

A normal slider

Taking the taxonomy of seven task from The eyes have it [Shneiderman, 1996] the range slider is located in the filter task. Which basically means the range slider appears in the the Visual Information Seeking mantra Overview first, zoom and filter, then details-on-demand.

Usage

There are several UI related aspects to all sliders in common and to the Range Slider in specific. One thing is how the values can be selected. For setting the desired values one can use the mouse and/or the keyboard by simply dragging (mouse) or shifting (keyboard) the sliders, or via direct input of values (additional input fields).

How to represent large value ranges when high granularity is an issue. As a slider can only let the user select as many points as there are pixels for the slider. Maybe someway to specify an accuracy Range Sliders can be enhanced by not only using them to select a value but use the space inside the slider to show color scales, barplots or density graphs.


Closley related UI components are Alpha Sliders (nominal attributes), Toogles (binary attributes) and Checkboxes (ordinal attributes).



The current and the max/min range values have to be displayed

What to do with a slider when resized

For some examples how a Range Slider can be used look at the weblinks under references.

See also

References

  • Proceedings
[Eick, 1994] Stephen G. Eick. Data Visualization Sliders. In UIST '94: Proceedings of the 7th annual ACM symposium on User interface software and technology, pages 119–120, Marina del Rey, California, 1994. ACM Press
[Ahlberg and Shneiderman, 1994a] Christopher Ahlberg and Ben Shneiderman. Visual information seeking: tight coupling of dynamic query filters with starfield displays. In CHI '94: Proceedings of the SIGCHI conference on Human factors in computing systems, pages 313–317, Boston, Massachusetts, 1994. ACM Press
[Ahlberg and Shneiderman, 1994b] Christopher Ahlberg and Ben Shneiderman. The alphaslider: a compact and rapid selector. In CHI '94: Proceedings of the SIGCHI conference on Human factors in computing systems, pages 365-371, Boston, Massachusetts, 1994. ACM Press
[Shneiderman, 1996] Ben Shneiderman. The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations. In VL '96: Proceedings of the 1996 IEEE Symposium on Visual Languages, pages 336–343(?), Washington, DC, July 1996. IEEE Computer Society
[Li et al., 2003] Qing Li and Xiaofeng Bao and Chen Song and Jinfei Zhang and Chris North. Dynamic query sliders vs. brushing histograms. In CHI '03: CHI '03 extended abstracts on Human factors in computing systems, pages 834–835, New York, NY, 2003. ACM Pres
  • Web Links
Film Finder
Home Finder
[Macrofocus(?), 2002] Macrofocus(?), Macrofocus|InfoScope. Created at: ?. Retrieved at: October 28, 2006. http://www.macrofocus.com/public/products/infoscope.html.
[Tanin, 1997] Egemen Tanin, Background on Dynamic Queries. Created at: Jan 2, 1997. Retrieved at: October 28, 2006 http://hcil.cs.umd.edu/trs/96-18/node8.html.
[Shneiderman, 1999] Ben Shneiderman, Dynamic queries, starfield displays, and the path to Spotfire. Created at: February 4, 1999. Retrieved at: October 28, 2006 http://www.cs.umd.edu/hcil/spotfire/
[Hesselberg, 2001] Petter Hesselberg, Range Slider - User Interface Programming. Created at: January 21, 2001. Retrieved at: October 28, 2006 http://www.petterhesselberg.com/RangeSlider.html
[Wan, 2001] Samuel Wan, Samuel Wan : News, Information and Resources: Range Slider Component. Created at: April 05, 2002. Retrieved at: October 28, 2006 http://www.samuelwan.com/information/archives/000055.html
[Sahling, 2002] Niki Sahling, Brushing Types. Created at: December 03, 2002. Retrieved at: October 28, 2006 http://www.vrvis.at/via/resources/DA-NSahling/node47.html
[Waloszek, 2004] G. Waloszek, UEC-Template: Index1. Created at: January 15, 2004. Retrieved at: October 28, 2006 http://www.sapdesignguild.org/community/book_people/visualization/controls/RangeSlider.htm