Hi, This is <hx:inputNumber>, which can render a spinner or a slider. It may seem so straight forward, but here is the prototype.
=============================== ==========<hx:inputNumber>====== =============================== REFS: [0] http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element [1] http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#range-state [2] http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#number-state [3] http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary EXTENDS: some input component ATTRIBUTES not present in ancestor: type(required): can be 'spinner': which renders a spinner text box 'slider': which renders a slider suggestions: *same suggestion mechanism with <hx:inputText>* min: minimum value that can be selected. default to 0. max: maximum that can be selected. default to 100. step: gap between each segment. if both 'step' and 'segmentCount' is not defined, 'step' is default to (max-min)/(100). segmentCount: used to calculate step with min and max. step ~= (max-min)/segmentCount. default to 100, if step is not defined too. either 'step' or 'segmentCount' should be defined, not both! autocomplete: to override owner form's autocomplete attribute for its children. can be 'on' 'off' 'default'(default) datalist: id of <hx:datalist> for suggestions mechanism. by this way, suggestion options(datalist) can be shared across several input elements. NOTES: Cannot extend hx:inputText, since this doesn't have size attribute! Will extend an abstract middle component. --> <!-- - - - - - - - - -usage- - - - - - - - - - - - - - - - - - - - -- --> <hx:inputNumber type="spinner" value="#{someBean.someNumberField}" min="100" max="1000"/> <!-- expected HTML5 code --> <input type="number" value="" min="100" step="9" max="1000" /> <!-- - - - - - - - - -usage- - - - - - - - - - - - - - - - - - - - -- --> <hx:inputNumber type="slider" value="#{someBean.someNumberField}" min="100" max="1000" segmentCount="10"/> <!-- expected HTML5 code --> <input type="range" value="" min="100" step="90" max="1000" /> Regards, Ali
