I am working on a project where a series of ranges are to be administered. The ranges are associated with a certain value. Say that a sales associate is at 20% commission when his sales are from 0 to 3 million, and after 3 million, the commission goes up to 25%. This data is stored in tabular format in the database, but administering the data through a tabular grid view was getting very difficult to maintain and administer. It was difficult to prevent the user from creating gaps or overlap in the ranges.
We wanted a graphical way to represent range based data. We first tried to use a "slider" (http://jqueryui.com/demos/slider/) control, but since the ranges are all affected by each other this caused us to layer sliders on top of sliders and it became a visual and administrative mess. We then went over to the white board to think of how else to represent ranges of values.
We first worked out a number line, with icons indicating the various possible actions. We tried to decide on a layout that would be as easy to reproduce in html as possible. The source code and a brief description for our Range Administration and Maintenance Control used to manage ranges of numbers is available at the following URL:
Hopefully somebody finds this a useful way to represent data, or maybe other people have put together other controls to maintain ranges of data.