<< View previous version | view page history | view next version >>
Getting Started:
The Slider is a component that enables the user to adjust values in a finite range along a horizontal or vertical axis.
To use the slider component, first the sparkle component name-space has to be added in your page.
<html xmlns:ann="http://www.icesoft.com/icefaces/component/annotated" ..>
The second step is to apply a-skin-name on the parent element of slider component.
<h:form styleClass="a-skin-name">
Now you ready to use slider component, here is the basic example:
<ann:slider />
By now page should look like this:
<html xmlns:ann="http://www.icesoft.com/icefaces/component/annotated" ..> <body> <h:form styleClass="ice-skin-rime"> <ann:slider /> <h:form> <body> <html>
Attributes:
Define the value of slider:
The value attribute of slider represents the current value. The default is 0.
<ann:slider value="60"/> //using managed bean <ann:slider value="#{bean.value}"/>
Minimum value of slider:
The min attribute specify value at the far left ot top of the rail. Default is 0.
<ann:slider min="10"/>
Maximum value of slider:
The max attribute specify value at the far right or bottom of the rail. Default is 0.
<ann:slider max="60"/>
Changing the axis:
This attribute specifies horizontal or vertical slider, "y" is for vertical. The default value is "x".
<ann:slider axis="y"/>
Defining the length of the slider:
The length attribute defines the height of vertical Slider rail and width of horizontal slider rail. Default value is 150px.
<ann:slider length="300px"/>
Defining the thumb image:
The thumbUrl attribute takes the path to an image to use as the <img> for the thumb. Default is /skins/sam/thumb-x.png
<ann:slider thumbUrl="images/slider/myThumb.png" />
Additional attributes:
Defining style:
The is a pass through to the root element of the slider.
Defining style class:
The is a pass through to the root element of the slider.
Defining tabindex:
The is a pass through to the root element of the slider.
Defining the submission behaviour:
When singleSubmit attribute is true, the slider value change event request a submit call with execute=@this and render=@all, if false then full submit happens where execute being set to @all. default valid is false.
When to submit slider:
The submitOn attribute, allows you to define when to notify server. 3 possible values are "slideStart", "slideEnd" and "slideInterval". Default is "slideEnd"
<ann:slider submitOn="slideStart" />
Defining slideInterval, when submitOn is set to "slideInterval":
The slideInterval attribute comes into an effect when you use submitOn="slideInterval". The sliderInterval take the value of interval, default is 500 milliseconds.
<ann:slider submitOn="slideInterval" slideInterval="300"/>
Capture value change event:
The slider component fires a valueChange event, which can be captured using a valueChangeListener attribute on slider component.
<ann:slider valueChangeListener="#{bean.sliderChanged}"/>
Making the rail clickable:
Clicking on the rail moves the thumb to that point. Default is true.
<ann:slider clickableRail="true" />
Keyboard and ARIA support:
Slider component supports keyboard short-cuts and ARIA. Aria support can be enabled at page level or at application level. By default ARIA is enabled at application level.
To enable/disable ARIA at page level, the ice:config tag handler can used:
<ice:config ariaEnabled="true"/>
To enable/disable ARIA at application level, the following param can be set in web.xml.
<context-param> <param-name>org.icefaces.aria.enabled</param-name> <param-value>false</param-value> </context-param>
Keyboard short-cuts supported by Slider:
- left arrow and down arrow: decrease the value of the slider.
- right arrow and up arrow: increase the value of the slider.
- home key: move to the minimum value of the slider.
- end key: move to the maximum value of the slider.
Get the JS Slider object on client:
The javascript representation of slider component can be get on client using the following helper API:
ice.yui.slider.getInstance(clientId, callback);
For example:
<h:form id="myform"> <ann:slider id="myslider" value="#{bean.value}"/> <input type="button" value="get slider value" onclick="ice.yui.slider.getInstance('myform:myslider', function(slider) { alert(slider.get('value')); })"/> </h:form>
Slider Story Board: