ibm-js/deliteful — pull request #131 by seb-pereira (2014-05-25 16:41:00+00:00)
Title: Slider, fixes and enhancements

This PR is for review.

The Slider widget allows selecting a value comprised between a minimum (min) and a maximum (max). It can also manage 2 handles to allow selecting 2 values.

The selected value depends on the position of the handle and the step, which specifies the value granularity. Slider can be vertical or horizontal. The position of the minimum and maximum depends on the text direction, and can be forced using the flip property. Hanldes can be move using pointers (mouse, touch) or keys (up, down, home or end).

**This PR depends on https://github.com/ibm-js/delite/pull/180 (`delite/_FormValueWidget` fix + enhancement) for the following behavior:**
A change event is fire upon user selection when the pointer or the key is released. Application can choose to be notified of intermediate changes by setting the intermediateChanges property inherited from FormValueWidget [1].

When `intermediateChanges` is true, change events are fire on each value change. The change event contains the property `intermediateChange (true|false)` to allow application to know if the event result from the action of moving a Slider handle, or if it results from the actual user selection.

The Slider Widget now supports ARIA attributes `aria-valuenow` with `aria-valuemin` and `aria-valuemax`.

Most of the Slider behavior (default values, out of bound values reconciliations, step mismatch...) are similar to the HTML5.1 input type=range element [1], but it doesn't strictly conform to the specification, in particular for the attributes:
* `multiple` : single/range Slider is directly determined from the content of the value property
* `datalist` : currently implemented using deliteful/Rule

Like the native input type=range element, this widget can be used in a form. It relies on a hidden input text element to provide the value to the form.

**Fixes**
Fixes https://github.com/ibm-js/deliteful/issues/32 Slider: the 'disable' state should have an associated style
Fixes https://github.com/ibm-js/deliteful/issues/90 Slider: unable to change width
Fixes https://github.com/ibm-js/deliteful/issues/10 Slider: add missing intern tests (unit + functional)
Fixes https://github.com/ibm-js/deliteful/issues/30 Slider: properties must be dynamic as much as possible
Fixes https://github.com/ibm-js/deliteful/issues/29 Slider: a way to translate the range interactively

**Rule**
There is a ace condition and/or wrong way to handle validation of Rule properties which leads to unstable layout of Rule CSS classes. As it is related to Rule implementation it will be addressed in a dedicated PR (also depends on whether we want to follow HTML5.1 datalist in Slider).

**Template**
Slider is loosely coupled with deliteful/Rule. Do not know yet if we want to stick with Rule or begin to follow the HTML5.1 with datalist attribute. I prefer to work on templating once this PR is merged, so it doesn't address issue https://github.com/ibm-js/deliteful/issues/130 (Slider: use templates). There are other things that may be complex to handle such the Slider handle that is added or removed depending on the value.

**Theme**
* bootstrap theme is fully implemented
* IOS/Holodark: disabled styling not handled yet.

[1] http://www.w3.org/TR/html5/forms.html#range-state-%28type=range%29