HTML and CSS Reference
In-Depth Information
// Update the value of the input element and fire a change event
jQuery("#" + rangeId).val(ui.value).change();
}});
});
}
</script>
<!-- Div used for fallback in case the HTML5 range control is not supported -->
<div id="#{cc.clientId}:fallback" style="display: block"></div>
<div id="#{cc.clientId}">
<input jsf:id="range" type="range" jsf:value="#{cc.attrs.value}"
step="#{cc.attrs.step}" min="#{cc.attrs.min}" max="#{cc.attrs.max}"
list="#{cc.attrs.list}" />
</div>
</cc:implementation>
</html>
Using the Composite Component
Listing 7-22 shows some examples of the composite control with accompanying screenshots in Figure
7-7
(native
HTML5 support) and Figure
7-8
(fallback).
Listing 7-22.
Examples of Using the inputRange Composite Component
<h1>JSF Composite Control</h1>
<section>
<label for="min-to-max">Range (-10 to 10): </label>
<projsfhtml5:inputRange value="#{componentInputRange.range1}" min="-10" max="10">
<f:ajax event="change" execute="@this" render=":frm:selectedValue" />
</projsfhtml5:inputRange>
<h:outputText id="selectedValue" value="Selected value: #{componentInputRange.range1}"/>
</section>
<section>
<label for="with-list">Range (with List): </label>
<projsfhtml5:inputRange value="#{componentInputRange.range2}" min="-100" max="10" list="range-options">
<f:ajax event="change" execute="@this" render=":frm:selectedValue2" />
</projsfhtml5:inputRange>
<h:outputText id="selectedValue2" value="Selected value: #{componentInputRange.range2}"/>
<projsfhtml5:dataList id="range-options">
<projsfhtml5:option value="-100" />
<projsfhtml5:option value="-75" />
<projsfhtml5:option value="-50" />
<projsfhtml5:option value="-25" />
<projsfhtml5:option value="0" />
<projsfhtml5:option value="10" />
</projsfhtml5:dataList>
</section>
<h:commandButton value="Submit" />
