<h2>First example : the range slider</h2>
	This is a range slider, the values are updated on submit, and the associated textfields are displayed.<br/>
	
	<t:jquery.rangeslider t:min="min" t:max="max" t:params="rangeparams" 
		t:DisplayTextField="true"/>

<br/>
The min value is ${min} (updated on submit)<br/>
The max value is ${max} (updated on submit)
<br/>
	

		
@Property
private JSONObject rangeParams;


@OnEvent(EventConstants.ACTIVATE)
public void initRangeSlider(){
	rangeParams = new JSONObject();
	JSONArray values = new JSONArray();
	values.put(min);
	values.put(max);
	rangeParams.put("values", values);
	rangeParams.put("min", 0);
	rangeParams.put("max", 500);
}



	

		
<h2>Second example : the (vertical and animated) range slider updating a zone</h2>
<t:jquery.rangeslider t:min="minZone" t:max="maxZone" t:params="paramsRangeZone" 
		t:zone="myZoneRange" t:id="sliderRangeZone"/>
<br/>
<t:zone t:id="myZoneRange" id="myZoneRange">
	The min value is ${minZone}.<br/>
	The max value is ${maxZone}.
</t:zone>
	

		
@Property
private JSONObject paramsRangeZone;

@OnEvent(EventConstants.ACTIVATE)
public void initRangeZoneSlider(){
	if(minZone==0 && maxZone==0) {
		maxZone=150;
		minZone=10;
	}
	
	paramsRangeZone=new JSONObject();
	JSONArray valuesZone = new JSONArray();
	valuesZone.put(minZone);
	valuesZone.put(maxZone);
	paramsRangeZone.put("values", valuesZone);
	paramsRangeZone.put("min", 0);
	paramsRangeZone.put("max", 200);
	paramsRangeZone.put("orientation", "vertical");
	paramsRangeZone.put("animate", "true");
}

@Component
private Zone myZoneRange;

@OnEvent(value=EventConstants.ACTION, component="sliderRangeZone")
public Object returnZoneRange(){
	minZone= Integer.parseInt(request.getParameter("min"));
	maxZone= Integer.parseInt(request.getParameter("max"));		
	return myZoneRange.getBody();
}
	
}