Getting Started

The ace:sliderEntry component 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 ace component name-space has to be added in your page.

<html ... xmlns:ace="http://www.icefaces.org/icefaces/components">

The second step is to apply a skin name on a parent element of slider component.

<h:form styleClass="ice-skin-rime">

Now you ready to use slider component, here is the basic example:

<ace:sliderEntry/>

By now page should look like this:

<html ... xmlns:ice="http://www.icefaces.org/icefaces/components">
<body>
  <h:form styleClass="ice-skin-rime">
     <ace:sliderEntry />
  </h:form>
</body>
</html>

Attributes

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.

Define the value of slider:
The value attribute of slider represents the current value. The default is 0.

     <ace:sliderEntry value="60"/>

     //using managed bean
     <ace:sliderEntry value="#{bean.value}"/>

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

    <ace:sliderEntry min="10"/>

Maximum value of slider:
The max attribute specify value at the far right or bottom of the rail. Default is 0.

    <ace:sliderEntry max="60"/>

Changing the axis:
This attribute specifies horizontal or vertical slider, "y" is for vertical. The default value is "x".

    <ace:sliderEntry 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.

    <ace:sliderEntry 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

    <ace:sliderEntry 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"

    <ace:sliderEntry 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.

   <ace:sliderEntry 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.

    <ace:sliderEntry valueChangeListener="#{bean.sliderChanged}"/>

Making the rail clickable:
Clicking on the rail moves the thumb to that point. Default is true.

    <ace:sliderEntry 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 [<icecore:config>] tag can used:

<icecore: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 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.

Get the JS Slider object on client

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

    ice.component.slider.getInstance(clientId, callback);

For example:

<h:form id="myform">
   <ace: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>

Slider Story Board:

SliderEntry