h2. Overview
The _ace:sliderEntry_ component enables the user to adjust values in a finite range along a horizontal or vertical axis via dragging the slider control along the slider bar, or pressing the arrow-keys.
It can be used as a visual replacement for an input box that takes a number as input.
!hSlider.jpg!
h2. Getting Started
To use the slider component, first the ace component name-space has to be added in your page.
{code:xml}<html ... xmlns:ice="http://www.icefaces.org/icefaces/components">
{code}
Now you ready to use slider component, here is the basic example:
{code:xml}<ice:sliderEntry/>
{code}
By now page should look like this:
{code:xml}<html ... xmlns:ice="http://www.icefaces.org/icefaces/components">
<h:head></h:head>
<h:body>
<h:form>
<ice:sliderEntry />
</h:form>
</h:body>
</html>
{code}
h2. Attributes
{tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://www.icefaces.org/docs/v3_latest/ace/tld/ace/sliderEntry.html].{tip}
{panel}
{*}Define the value of slider:*
The *value* attribute of slider represents the current value. The default is 0.
{code:xml} <ice:sliderEntry value="60"/>
//using managed bean
<ice:sliderEntry value="#{bean.value}"/>
{code}
{panel}
{panel: bgColor=#FFFFCE}
*Minimum value of slider:*
The *min* attribute specify value at the far left ot top of the rail. Default is 0.
{code:xml} <ice:sliderEntry min="10"/>
{code}
{panel}
{panel bgColor=#FFFFCE}
*Maximum value of slider:*
The *max* attribute specify value at the far right or bottom of the rail. Default is 100.
{code:xml} <ice:sliderEntry max="60"/>
{code}
{panel}
{panel bgColor=#FFFFCE}
*Changing the axis:*
!vSlider.jpg!
The *axis* attribute specifies the axis-orientation of the slider bar, "x" for horizontal, and "y" is for vertical. The default value is "x".
{code:xml} <ice:sliderEntry axis="y"/>
{code}
{panel}
{panel bgColor=#FFFFCE}
* Defining the length of the slider:*
!railSize.jpg!
The *length* attribute defines the height of vertical Slider rail and width of horizontal slider rail. Default value is "150px".
{code:xml} <ice:sliderEntry length="300px"/>
{code}
{panel}
{panel bgColor=#FFFFCE}
* 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
{code:xml} <ice:sliderEntry thumbUrl="images/slider/myThumb.png" />
{code}
{panel}
h2. Event Listeners
| valueChangeListener | Used to define a server-side valueChangeListener which will be notified each time the slider value is changed. The valueChangeEvent is fired whenever the "slideEnd" client event fires. |
{code:xml} <ice:sliderEntry valueChangeListener="#{bean.sliderChanged}"/>
{code}
h2. Client Behavior Events
| slideBegin | Fired when a drag operation on the slider control is initiated. |
| slide | Fired each time the the slider control is moved during a drag operation. |
| slideEnd | Fired when a drag operation is completed by releasing the slider control (default event). |
{code:xml}<ice:sliderEntry value="#{bean.value}" >
<ace:ajax event="slide" execute="@this" render="sliderValueOutput" />
</ice:sliderEntry>
{code}
h2. JavaScript API
The JavaScript representation of the slider component can be referenced on browser using the following JavaScript API:
{code:xml} ice.component.slider.getInstance(clientId, callback);
{code}
For example:
{code:xml}<h:form id="myform">
<ice:sliderEntry id="myslider" value="#{bean.value}"/>
<input type="button" value="get slider value"
onclick="ice.component.slider.getInstance(
'myform:myslider', function(slider) { alert(slider.get('value')); })"/>
</h:form>
{code}
h2. Keyboard Support
||Keypress || Result ||
|Left Arrow or Down Arrow | Decrease the value of the slider. |
| Right Arrow or 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. |
h2. Known Issues
The following known issues exist for the sliderEntry:
* The 'showLabels' attribute is not functional in ICEfaces 3.0.0. It does work correctly in 2.0.x.
h2. Additional Resources
h4. Sample Applications
The sliderEntry component appears in the following ICEfaces sample applications:
*ICEfaces Showcase*
* [Slider Demo|http://comp-suite.icefaces.org/comp-suite/showcase.jsf?grp=aceMenu&exp=slider]
* Located under _/icefaces/samples/showcase_.
h4. Tutorials
The sliderEntry component appears in the following ICEfaces tutorials:
*None*
The _ace:sliderEntry_ component enables the user to adjust values in a finite range along a horizontal or vertical axis via dragging the slider control along the slider bar, or pressing the arrow-keys.
It can be used as a visual replacement for an input box that takes a number as input.
!hSlider.jpg!
h2. Getting Started
To use the slider component, first the ace component name-space has to be added in your page.
{code:xml}<html ... xmlns:ice="http://www.icefaces.org/icefaces/components">
{code}
Now you ready to use slider component, here is the basic example:
{code:xml}<ice:sliderEntry/>
{code}
By now page should look like this:
{code:xml}<html ... xmlns:ice="http://www.icefaces.org/icefaces/components">
<h:head></h:head>
<h:body>
<h:form>
<ice:sliderEntry />
</h:form>
</h:body>
</html>
{code}
h2. Attributes
{tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://www.icefaces.org/docs/v3_latest/ace/tld/ace/sliderEntry.html].{tip}
{panel}
{*}Define the value of slider:*
The *value* attribute of slider represents the current value. The default is 0.
{code:xml} <ice:sliderEntry value="60"/>
//using managed bean
<ice:sliderEntry value="#{bean.value}"/>
{code}
{panel}
{panel: bgColor=#FFFFCE}
*Minimum value of slider:*
The *min* attribute specify value at the far left ot top of the rail. Default is 0.
{code:xml} <ice:sliderEntry min="10"/>
{code}
{panel}
{panel bgColor=#FFFFCE}
*Maximum value of slider:*
The *max* attribute specify value at the far right or bottom of the rail. Default is 100.
{code:xml} <ice:sliderEntry max="60"/>
{code}
{panel}
{panel bgColor=#FFFFCE}
*Changing the axis:*
!vSlider.jpg!
The *axis* attribute specifies the axis-orientation of the slider bar, "x" for horizontal, and "y" is for vertical. The default value is "x".
{code:xml} <ice:sliderEntry axis="y"/>
{code}
{panel}
{panel bgColor=#FFFFCE}
* Defining the length of the slider:*
!railSize.jpg!
The *length* attribute defines the height of vertical Slider rail and width of horizontal slider rail. Default value is "150px".
{code:xml} <ice:sliderEntry length="300px"/>
{code}
{panel}
{panel bgColor=#FFFFCE}
* 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
{code:xml} <ice:sliderEntry thumbUrl="images/slider/myThumb.png" />
{code}
{panel}
h2. Event Listeners
| valueChangeListener | Used to define a server-side valueChangeListener which will be notified each time the slider value is changed. The valueChangeEvent is fired whenever the "slideEnd" client event fires. |
{code:xml} <ice:sliderEntry valueChangeListener="#{bean.sliderChanged}"/>
{code}
h2. Client Behavior Events
| slideBegin | Fired when a drag operation on the slider control is initiated. |
| slide | Fired each time the the slider control is moved during a drag operation. |
| slideEnd | Fired when a drag operation is completed by releasing the slider control (default event). |
{code:xml}<ice:sliderEntry value="#{bean.value}" >
<ace:ajax event="slide" execute="@this" render="sliderValueOutput" />
</ice:sliderEntry>
{code}
h2. JavaScript API
The JavaScript representation of the slider component can be referenced on browser using the following JavaScript API:
{code:xml} ice.component.slider.getInstance(clientId, callback);
{code}
For example:
{code:xml}<h:form id="myform">
<ice:sliderEntry id="myslider" value="#{bean.value}"/>
<input type="button" value="get slider value"
onclick="ice.component.slider.getInstance(
'myform:myslider', function(slider) { alert(slider.get('value')); })"/>
</h:form>
{code}
h2. Keyboard Support
||Keypress || Result ||
|Left Arrow or Down Arrow | Decrease the value of the slider. |
| Right Arrow or 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. |
h2. Known Issues
The following known issues exist for the sliderEntry:
* The 'showLabels' attribute is not functional in ICEfaces 3.0.0. It does work correctly in 2.0.x.
h2. Additional Resources
h4. Sample Applications
The sliderEntry component appears in the following ICEfaces sample applications:
*ICEfaces Showcase*
* [Slider Demo|http://comp-suite.icefaces.org/comp-suite/showcase.jsf?grp=aceMenu&exp=slider]
* Located under _/icefaces/samples/showcase_.
h4. Tutorials
The sliderEntry component appears in the following ICEfaces tutorials:
*None*