Till Nagel

A radial range slider

by Till Nagel.

A radial range slider to select dates in circular, recurring data sets. It can be used for repetitive event data, such as the time of day, weeks, or seasons, but also for other circular data, such as direction angles, etc.

Update 11 Feb 2016: Find the source at https://github.com/tillnagel/radialrangeslider

Fig. 1: Changing the range by dragging one of the handles

To adapt the range, the user can drag either the start or the end handle. This works continously in both directions, as well as for movements over 360°.

Fig. 2: Moving the range by dragging the pie itself

Unique to this design is the ability to easily select any range, including ranges overlapping start and end dates, and the ability to move chosen ranges around as a whole. The adjustment handles can be set to snap to allowed values, only. Multiple ranges in the same view are possible. Furthermore, the interaction possibility of the range selector can be combined with the visualization of the data in a unified widget.

Radial range slider for 12h clock to select time spans.

Related Work

There have been various design proposals or implementation around the idea of selecting ranges from a arbritary data set, as well as radial visualizations for time data. In the following, some of those ideas are presented and discussed.

Range slider

Range sliders [allow] users to adjust values from both ends (instead of only one end), and to move the entire range of interest by dragging the middle of the slider.

Hochheiser, H., Shneiderman, B.: Dynamic query tools for time series data sets: Timebox widgets for interactive exploration. In Information Visualization (2004) 3, 1–18

Fig. 3: Range sliders of the Dynamic Home Finder

The well-known Home Finder provided different GUI widgets to dynamically query a real estate database. It included one of the earliest examples of a range slider, e.g. to select the number of bed rooms, or to define a price range. Those were without the ability of dragging the whole range (c.f. Williamson, C., Shneiderman, B.: The dynamic HomeFinder: evaluating dynamic queries in a real-estate information exploration system. In Proceedings of SIGIR ’92)

The Pie of Time

Stamen Design created this interaction widget for the Oakland Crime Spotting project, allowing users to filter the displayed crimes for specific times of day. It is provided in combination with a more standard linear range selector for dates. Find some more details on the Pie of Time in Stamen’s blog.

Fig. 4: (1) Pie of Time, (2) A time switch

Overall, it’s a great design, and provides a smooth user interaction. Additionally, it offers the ability to select multiple time ranges. The used metaphor (of a time switch) might make it meaningful only for time of day ranges. Also, in providing no dragging interaction, there is no possibility to move the full range around.

2 comments on ‘A radial range slider’

  1. Patrick Brown says:

    This has alot of potential. There’s got to be something to controlling large swathes of content by just clicking and not having to move the mouse. Think one radial on top of another would work?

Leave a Reply