View Source

h1. Getting Started

The Slider is a component that enables the user to adjust values in a finite range along a horizontal or vertical axis.

It can be used as a visual replacement for an input box that takes a number as input.

To use the slider component, first the sparkle component name-space has to be added in your page.
{code:xml}<html ... xmlns:ice="http://www.icefaces.org/icefaces/components">
{code}
&nbsp;The second step is to apply a skin name on a parent element of slider component.
{code:xml}<h:form styleClass="ice-skin-rime">
{code}
&nbsp;Now you ready to use slider component, here is the basic example:
{code:xml}<ice:sliderEntry/>
{code}
&nbsp; !hSlider.jpg!


&nbsp;By now page should look like this:
{code:xml}<html ... xmlns:ice="http://www.icefaces.org/icefaces/components">
<body>
<h:form styleClass="ice-skin-rime">
<ice:sliderEntry />
</h:form>
</body>
</html>
{code}
h1. Attributes
{info: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/v2_0_0b2/ace/taglibdoc/ice/sliderEntry.html]

.{info}{*}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}
{*}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}
{*}Maximum value of slider:*
The max attribute specify value at the far right or bottom of the rail. Default is 0.
{code:xml} <ice:sliderEntry max="60"/>
{code}
{*}Changing the axis:*
This attribute specifies horizontal or vertical slider, "y" is for vertical. The default value is "x".
{code:xml} <ice:sliderEntry axis="y"/>
{code}
&nbsp; !vSlider.jpg!


*&nbsp; Defining the length of the slider:*
&nbsp; 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}
!railSize.jpg!
*&nbsp; Defining the thumb image:*
&nbsp; 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}
h1. Additional attributes

*&nbsp;Defining style:*
&nbsp;The is a pass through to the root element of the slider.

*&nbsp;Defining style class:*
&nbsp;The is a pass through to the root element of the slider.

*&nbsp;Defining tabindex:*
&nbsp;The is a pass through to the root element of the slider.

*&nbsp;Defining the submission behaviour:*
&nbsp;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.


*&nbsp;When to submit slider:*
&nbsp;The submitOn attribute, allows you to define when to notify server. 3 possible values are "slideStart", "slideEnd" and "slideInterval". Default is "slideEnd"

{code:xml} <ice:sliderEntry submitOn="slideStart" />
{code}
*&nbsp;Defining slideInterval, when submitOn is set to "slideInterval":*
&nbsp;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} <ice:sliderEntry submitOn="slideInterval" slideInterval="300"/>
{code}
*&nbsp;Capture value change event:*
&nbsp;The slider component fires a valueChange event, which can be captured using a valueChangeListener attribute on slider component.

{code:xml} <ice:sliderEntry valueChangeListener="#{bean.sliderChanged}"/>
{code}
{*}Making the rail clickable:*
Clicking on the rail moves the thumb to that point. Default is true.


{code:xml} <ice:sliderEntry clickableRail="true" />
{code}
h1. Keyboard and ARIA support

&nbsp;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.

&nbsp;To enable/disable ARIA at page level, the [<icecore:config>|Core Tags#icecoreconfig] tag can used:

{code:xml}<icecore:config ariaEnabled="true"/>
{code}
&nbsp;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}
h3. Keyboard short-cuts supported by SliderEntry

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

h1. Get the JS Slider object on client

&nbsp;The javascript representation of slider component can be get on client using the following helper API:

{code:xml} ice.component.slider.getInstance(clientId, callback);
{code}
&nbsp;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}
Slider Story Board: !StoryBoard.jpg|align=center!