In sliders where the track is small compared to the number of steps available in the range, it is often difficult for end-users to set the exact value they desire. This is because the value is derived from the thumb position on the track and sliding the thumb of a small slider, even minutely, can result in adjustment of a few steps.

In order to improve end-user experience, the uiSlider from the Aspire UI library (v1.1.5+) implements mouse wheel support. When a uiSlider instance has focus, the end-user may hover the mouse over the instance and use the mouse wheel to adjust the value up or down step-by-step (by moving the mouse wheel up or down). This is implemented on top of the usual keyboard support (UP and DOWN keys).

Try this in the demo below (click on slider to give it focus first):

NOTE: There is a bug in the Mozilla Firefox 3 browser – the MouseWheel event is sent twice, causing adjustments in two steps instead of one:
http://bugs.adobe.com/jira/browse/FP-347
http://bugs.adobe.com/jira/browse/FP-2120
https://bugzilla.mozilla.org/show_bug.cgi?id=442816

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.

Other Posts You Might Enjoy:

• [UX] CTRL+SHIFT Non-Contiguous List Selections
• Aspire UI Preview: Tab Focus Management
• [Developer Showcase] ActiveCaptain – The Interactive Cruising Guidebook
• Using uiWindow: Setting the color and transparency level of the background overlay of modal windows
• uiWindow: Implementing “Confirm Close” Dialog

Trackback URI | Comments RSS