View Source

h1. Getting Started:

To use the slider component, first the sparkle component name-space has to be added in your page.
{code:xml}
<html xmlns:ann="http://www.icesoft.com/icefaces/component/annotated"
..>
{code}


The second step is to apply yui-skin-name on the parent element of slider component.
{code:xml}
<h:form styleClass="yui-skin-name">
{code}


Now you ready to use slider component, here is the basic example:
{code:xml}
<ann:slider />
{code}


By now page should look like this:
{code:xml}
<html xmlns:ann="http://www.icesoft.com/icefaces/component/annotated"
..>
<body>
<h:form styleClass="yui-skin-name">
<ann:slider />
<h:form>
<body>
<html>
{code}


h1. YUI Attributes:

*Define the value of slider:*
The value attribute of slider represents the current value. The default is 0.
{code:xml}
<ann:slider value="60"/>

//using managed bean
<ann:slider value="#{bean.value}"/>
{code}


*Minimum value of slider:*
The min attribute specify value at the far left ot top of the rail. Default is 0.

{code:xml}
<ann:slider min="10"/>
{code}


*Maximum value of slider:*
The max attribute specify value at the far right or bottom of the rail. Default is 0.
{code:xml}
<ann:slider max="60"/>
{code}

*Changing the axis:*
This attribute specifies horizontal or vertical slider, "y" is for vertical. The default value is "x".
{code:xml}
<ann:slider axis="y"/>
{code}


*Defining the rail size of the slider:*
The railSize attribute defines the heiht of vertical Slider rail and width of horizontal slider rail. Default value is 150px.
{code:xml}
<ann:slider railSize="250px"/>
{code}


*Defining the thumb image:*
The thumbImage attribute takes the path to an image to use as the <img> for the thumb. Default is /skins/sam/thumb-classic-x.png
{code:xml}
<ann:slider thumbImage="images/slider/myThumb.png" />
{code}


h1. 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"

{code:xml}
<ann:slider submitOn="slideStart" />
{code}

*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.

{code:xml}
<ann:slider submitOn="slideInterval" slideInterval="300"/>
{code}


*Capture value change event:*
The slider component fires a valueChange event, which can be captured using a valueChangeListener attribute on slider component.

{code:xml}
<ann:slider valueChangeListener="#{bean.sliderChanged}"/>
{code}


h1. Keyboard and ARIA support:
Slider component supports keyboard short-cuts and ARIA. Aria support can be enabled at page level or at application level.

To enable/disable ARIA at page level, the ice:config tag handler can used:

{code:xml}
<ice:config ariaEnabled="true"/>
{code}


To enable/disable ARIA at application level, the following param can be set in web.xml.
{code:xml}
<context-param>
<param-name>org.icefaces.aria.enabled</param-name>
<param-value>false</param-value>
</context-param>
{code}


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.