SliderTag

Introduction

The slider widget renders a jQuery UI based slider as a form control.

Samples

Simple Slider

<sj:slider id="simpleslider"/>

Slider as a form control

<div id="result">Submit form bellow.</div>

<s:form id="form" action="echo" theme="simple" cssClass="yform">
	<fieldset>
		<legend>AJAX Form</legend>
		<div class="type-text">
			<label for="echo">Echo: <span id="displayvaluespan">40</span></label>
			<sj:slider 
				id="echo" 
				name="echo" 
				value="40" 
				displayValueElement="displayvaluespan" 
				min="20" 
				max="200" 
				animate="true" 
				step="5" 
				cssStyle="margin: 10px;"
			/>
		</div>
		<div class="type-button">
			<sj:submit 
				targets="result" 
				value="AJAX Submit" 
				indicator="indicator_slider_form"
			/>
			<img id="indicator_slider_form" src="images/indicator.gif" alt="Loading..." style="display:none"/>
		</div>
	</fieldset>
</s:form>

Sliders with min and max range and events

$.subscribe('sliderStop', function(event,data) {
	alert('Slider stop with value : '+event.originalEvent.ui.value);
});

<div id="result">Submit form bellow.</div>

<s:form id="form1" action="echo" theme="xhtml" cssStyle="width: 400px; margin: 10px;">
	 <sj:slider 
		id="echo1" 
		name="echo" 
		label="Echo" 
		value="70" 
		onCompleteTopics="sliderStop" 
		range="min" 
		min="20" 
		max="200" 
		step="5" 
		cssStyle="width: 300px; margin: 10px;"
	/>
	<sj:submit 
		id="slidersubmit1" 
		targets="result" 
		value="AJAX Submit" 
		indicator="indicator_slider_range"
	/>
	<img id="indicator_slider_range" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</s:form>
<s:form id="form2" action="echo" theme="xhtml" cssStyle="width: 400px; margin: 10px;">
	 <sj:slider 
		id="echo2" 
		name="echo" 
		label="Echo" 
		value="120" 
		orientation="vertical" 
		onCompleteTopics="sliderStop" 
		range="max" 
		min="20" 
		max="200" 
		step="5" 
		cssStyle="height: 200px; margin: 10px;"
	/>
	<sj:submit 
		id="slidersubmit2" 
		targets="result" 
		value="AJAX Submit" 
		indicator="indicator_slider_range"
	/>
	<img id="indicator_slider_range" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</s:form>

Sliders with range and events

$.subscribe('sliderRangeStop', function(event, data) {
	alert('Slider stoped with values : ' + event.originalEvent.ui.values[0] + ' - ' + event.originalEvent.ui.values[1]);
});

<div id="result">Submit form bellow.</div>

<s:form id="form3" action="echo" theme="xhtml" cssStyle="width: 400px; margin: 10px;">
	<sj:slider 
		id="echo3" 
		name="echo" 
		label="Echo" 
		value="[15,55]" 
		onCompleteTopics="sliderRangeStop" 
		step="5" 
		cssStyle="margin: 10px;"
	/>
	<sj:submit 
		id="slidersubmit3" 
		targets="result" 
		value="AJAX Submit" 
		button="true" 
		indicator="indicator_slider_range3"
	/>
	<img id="indicator_slider_range3" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</s:form>
<s:form id="form4" action="echo" theme="xhtml" cssStyle="width: 400px; margin: 10px;">
	<sj:slider 
		id="echo4" 
		name="echo" 
		label="Echo" 
		value="{3, 7}" 
		min="1" 
		max="10" 
		onCompleteTopics="sliderRangeStop" 
		cssStyle="margin: 10px;"
	/>
	<sj:submit 
		id="slidersubmit4" 
		targets="result" 
		value="AJAX Submit" 
		button="true" 
		indicator="indicator_slider_range4"
	/>
	<img id="indicator_slider_range4" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</s:form>

Topics

Topic	Event	Parameter
onBeforeTopics	start	event.originalEvent.event, event.originalEvent.ui
onChangeTopics	change	event.originalEvent.event, event.originalEvent.ui
onCompleteTopics	stop	event.originalEvent.event, event.originalEvent.ui
onSlideTopics	slide	event.originalEvent.event, event.originalEvent.ui

Attributes

Name	Required	Default	Evaluated	Type	Description
accesskey	false		false	String	Set the html accesskey attribute on rendered html element
animate	false	false	false	Boolean	Whether to slide handle smoothly when user click outside handle on the bar. Default: false
cssClass	false		false	String	The css class to use for element
cssErrorClass	false		false	String	The css error class to use for element
cssErrorStyle	false		false	String	The css error style definitions for element to use
cssStyle	false		false	String	The css style definitions for element to use
disabled	false		false	String	Set the html disabled attribute on rendered html element
displayValueElement	false		false	String	Element Id to display the value.
errorPosition	false		false	String	Define error position of form element (top|bottom)
id	false		false	String	HTML id attribute
javascriptTooltip	false	false	false	Boolean	Use JavaScript to generate tooltips
key	false		false	String	Set the key (name, value, label) for this particular component
label	false		false	String	Label expression used for rendering an element specific label
labelSeparator	false	:	false	String	String that will be appended to the label
labelposition	false		false	String	Define label position of form element (top/left)
max	false		false	Integer	Initialize a slider with the max option specified. Default: 100
min	false		false	Integer	The minimum value of the slider. Default: 0
name	false		false	String	The name to set for element
onAfterValidationTopics	false		false	String	A comma delimited list of topics that published after the Ajax validation. event.originalEvent.formvalidate to see if validation passed/failed.
onAlwaysTopics	false		false	String	A comma delimited list of topics that published always
onBeforeTopics	false		false	String	Topics that are published before a load
onBlurTopics	false		false	String	A comma delimited list of topics that published when the element is blured
onChangeTopics	false		false	String	A comma delimited list of topics that published when the element changed
onCompleteTopics	false		false	String	A comma delimited list of topics that published when the element ajax request is completed (will override settings for a target container if provided)
onDisableTopics	false		false	String	A comma delimited list of topics that published when the element disabled
onEnableTopics	false		false	String	A comma delimited list of topics that published when the element is enabled
onErrorTopics	false		false	String	A comma delimited list of topics that published when the element ajax request returns an error (will override settings for a target container if provided)
onFocusTopics	false		false	String	A comma delimited list of topics that published when the element is focused
onSlideTopics	false		false	String	A comma delimited list of topics that published when slide
onSuccessTopics	false		false	String	A comma delimited list of topics that published when the element ajax request is completed successfully (will override settings for a target container if provided)
onblur	false		false	String	Set the html onblur attribute on rendered html element
onchange	false		false	String	Set the html onchange attribute on rendered html element
onclick	false		false	String	Set the html onclick attribute on rendered html element
ondblclick	false		false	String	Set the html ondblclick attribute on rendered html element
onfocus	false		false	String	Set the html onfocus attribute on rendered html element
onkeydown	false		false	String	Set the html onkeydown attribute on rendered html element
onkeypress	false		false	String	Set the html onkeypress attribute on rendered html element
onkeyup	false		false	String	Set the html onkeyup attribute on rendered html element
onmousedown	false		false	String	Set the html onmousedown attribute on rendered html element
onmousemove	false		false	String	Set the html onmousemove attribute on rendered html element
onmouseout	false		false	String	Set the html onmouseout attribute on rendered html element
onmouseover	false		false	String	Set the html onmouseover attribute on rendered html element
onmouseup	false		false	String	Set the html onmouseup attribute on rendered html element
onselect	false		false	String	Set the html onselect attribute on rendered html element
openTemplate	false		false	String	Set template to use for opening the rendered html.
orientation	false		false	String	Normally you don't need to set this option because the plugin detects the slider orientation automatically. If the orientation is not correctly detected you can set this option to 'horizontal' or 'vertical'. Default: 'auto'
range	false		false	String	If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Two other possible values are 'min' and 'max'. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.
requiredLabel	false	false	false	Boolean	If set to true, the rendered element will indicate that input is required
requiredPosition	false		false	String	Define required position of required form element (left|right)
step	false		false	Integer	Determines the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step. Default: 1
tabindex	false		false	String	Set the html tabindex attribute on rendered html element
template	false		false	String	The template (other than default) to use for rendering the element
templateDir	false		false	String	The template directory.
title	false		false	String	Set the html title attribute on rendered html element
tooltip	false		false	String	Set the tooltip of this particular component
tooltipConfig	false		false	String	Deprecated. Use individual tooltip configuration attributes instead.
tooltipCssClass	false	StrutsTTClassic	false	String	CSS class applied to JavaScrip tooltips
tooltipDelay	false	Classic	false	String	Delay in milliseconds, before showing JavaScript tooltips
tooltipIconPath	false		false	String	Icon path used for image that will have the tooltip
value	false		false	String	Determines the value of the slider. Default: 0