Attached is an image which represents proof of this concept. Basically, I want to extend Filament Group's excellent jquery range slider to support the functionality implied by my attached wireframe. This is multiple, discrete ranges set upon the same range slider, and this is a novel application of this jquery plugin which I cannot find and am having tremendous difficulty finding someone to attempt to undertake. I've completed a design but cannot engineer this without the assistance of a talented coder.
[[url removed, login to view]<wbr />examples/slider_v2/[url removed, login to view]]
As the attached zipped PNG image of a wireframe prototype implies, this begins with an empty screen with a dropdown menu. That select menu contains the seven (7) week days plus two more options ("weekends","weekdays".) For a total of nine (9) options.
This is essentially a front end for a form for scheduling. It should work as a form, as such, populating hidden variables for each range begin and end, etc.
Here's some rough display-action-response flow for this:
1. The user selects an option from the list menu and clicks the "New Range" button. Upon doing so, a range appears with a single slider, arbitarily defaulted to float all the way to the left, with an arbitrary default range of one (1) hour.
2. Using the handles the same way as the existing range slider, the user manipulates the scope of that range, or slides the range completely along the range timeline itself.
3. Once they've placed it and determined its range, the user should be able to mouseover the new range to view a tooltip which displays the range data as text, and also a link to remove it.
4. To add another range to this range timeline, the user simply repeats the select menu operation. (Note: if the range timeline for that option already exists with at least one range added to it, it simply adds to that one and doesn't duplicate the entire timeline for that option.)
5. To delete - again, the user mouses over the range to view the tool tip, and clicks "Delete" or whatever it says (unimportant for now.)
This should operate using the standard UI jquery core and UI libraries, and should be a self-contained script deliverable with compressed version included.
The output will be hidden HTML form inputs. When a new range is created, it corresponds to three (3) new hidden inputs and values: a day option (i.e., one of the nine (9) afore-mentioned select options), a begin range value, and an end range value. The latter two (begin and end) should be the appropriate time format.
Again, this is a novel application of this range slider but an idea one. The notion of using drag-and-drop widgets with handles to visually manage scheduling is not a new one and is in fact in heavy use in many calendar apps.
Please do not suggest modifications which will add steps to the workflow. The information design of this concept deliberately consolidates steps or objects in the view, in order to reduce noise and make it quick to operate.
Note: styles do not matter. Fonts and colors should all be basic defaults, and ALL styling related to the CSS of this interaction should be confined to a style sheet and not hard-coded inline, if possible!
Please bid only if you (A.) speak English well enough to converse with me, (B.) are available via Yahoo chat for at least some of the CDT hours (-6, Mexico City) and (C.) are able to turn this around competently and reasonably soon.
I appreciate your time!