<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<f:subview id="inputNumgerSliderID">
	<h:messages></h:messages>
	<h:form> 
	  <h:outputText value="Event:"></h:outputText>
      <rich:inputNumberSlider minValue="0" maxValue="100" width="300px"
      onmousedown="alert('OnMouseDown');"></rich:inputNumberSlider>
      
      <rich:spacer height="15px" width="300px"></rich:spacer>

		<rich:inputNumberSlider id="SliderId" disabled="#{inputNumberSlider.disabled}"
			enableManualInput="#{inputNumberSlider.enableManualInput}"
			inputSize="#{inputNumberSlider.inputSize}"
			maxValue="#{inputNumberSlider.maxValue}"
			minValue="#{inputNumberSlider.minValue}"
			rendered="#{inputNumberSlider.rendered}"
			showBoundaryValues="#{inputNumberSlider.showBoundaryValues}"
			step="#{inputNumberSlider.step}"
			showInput="#{inputNumberSlider.showInput}"
			width="#{inputNumberSlider.width}"
			barClass="#{inputNumberSlider.barStyle}"
			tipClass="#{inputNumberSlider.tipStyle}" 
			inputClass="#{inputNumberSlider.inputStyle}"
			handleClass="#{inputNumberSlider.handleStyle}"
			styleClass="#{inputNumberSlider.tipStyle}"
			maxlength="#{inputNumberSlider.maxlength}"></rich:inputNumberSlider>
<%-- 
<style type="text/css">
	.input
      {
      border:3px;
      background-color: maroon;
      }
      </style>
--%>	


		<rich:spacer height="20px"></rich:spacer>

		<h:panelGrid columns="2" cellspacing="10px" border="1">

			<h:outputText value="Width:"></h:outputText>
			<h:inputText value="#{inputNumberSlider.width}">
				<a4j:support event="onchange" reRender="SliderId"></a4j:support>
			</h:inputText>

			<h:outputText value="Max Value:"></h:outputText>
			<h:inputText value="#{inputNumberSlider.maxValue}">
				<a4j:support event="onchange" reRender="SliderId"></a4j:support>
			</h:inputText>

			<h:outputText value="Min Value:"></h:outputText>
			<h:inputText value="#{inputNumberSlider.minValue}">
				<a4j:support event="onchange" reRender="SliderId"></a4j:support>
			</h:inputText>

			<h:outputText value="Input Size:"></h:outputText>
			<h:inputText value="#{inputNumberSlider.inputSize}">
				<a4j:support event="onchange" reRender="SliderId"></a4j:support>
			</h:inputText>

			<h:outputText value="Input MaxLength:"></h:outputText>
			<h:inputText value="#{inputNumberSlider.maxlength}">
				<a4j:support event="onchange" reRender="SliderId"></a4j:support>
			</h:inputText>

			<h:outputText value="Step:"></h:outputText>
			<h:inputText value="#{inputNumberSlider.step}">
				<a4j:support event="onchange" reRender="SliderId"></a4j:support>
			</h:inputText>

			<h:outputText value="Disabled:"></h:outputText>
			<h:selectBooleanCheckbox value="#{inputNumberSlider.disabled}">
				<a4j:support event="onchange" reRender="SliderId"></a4j:support>
			</h:selectBooleanCheckbox>

			<h:outputText value="Rendered:"></h:outputText>
			<h:selectBooleanCheckbox value="#{inputNumberSlider.rendered}"
				onclick="submit()">
			</h:selectBooleanCheckbox>

			<h:outputText value="Manual Input:"></h:outputText>
			<h:selectBooleanCheckbox
				value="#{inputNumberSlider.enableManualInput}">
				<a4j:support event="onchange" reRender="SliderId"></a4j:support>
			</h:selectBooleanCheckbox>

			<h:outputText value="Boundary Values:"></h:outputText>
			<h:selectBooleanCheckbox
				value="#{inputNumberSlider.showBoundaryValues}">
				<a4j:support event="onchange" reRender="SliderId"></a4j:support>
			</h:selectBooleanCheckbox>

			<h:outputText value="Show Input:"></h:outputText>
			<h:selectBooleanCheckbox value="#{inputNumberSlider.showInput}">
				<a4j:support event="onchange" reRender="SliderId"></a4j:support>
			</h:selectBooleanCheckbox>

			<h:outputText value="Switch Styles" />
			<a4j:commandButton id="slBtn" value="#{inputNumberSlider.btnLabel}" 
			action="#{inputNumberSlider.doStyles}" reRender="SliderId,slBtn">
			</a4j:commandButton>
			
		</h:panelGrid>
	
		<h:commandLink value="Back" action="main"></h:commandLink>
	</h:form>
</f:subview>

