You are viewing an old version (v. 60) of this page.
The latest version is v. 84, last edited on Dec 11, 2014 (view differences | )
<< View previous version | view page history | view next version >>


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

Getting Started

To use the slider component, first the ace component name-space has to be added in your page.

<html ... xmlns:ice="">

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



 By now page should look like this:

<html ... xmlns:ice="">
  <h:form styleClass="ice-skin-rime">
     <ice:sliderEntry />


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.

     <ice:sliderEntry value="60"/>

     //using managed bean
     <ice: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.

    <ice:sliderEntry min="10"/>

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

    <ice:sliderEntry max="60"/>

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

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

    <ice: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

    <ice:sliderEntry thumbUrl="images/slider/myThumb.png" />

Event Listeners

Value Change Event
The sliderEntry supports a valueChangeListener attribute, which can be 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.

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

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

<ice:sliderEntry value="#{bean.value}" >
                 <ace:ajax event="slide" execute="@this" render="sliderValueOutput" />

JavaScript API

 The JavaScript representation of the slider component can be referenced on browser using the following JavaScript API:

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

 For example:

<h:form id="myform">
   <ice:sliderEntry id="myslider" value="#{bean.value}"/>
   <input type="button" value="get slider value"
              'myform:myslider', function(slider) { alert(slider.get('value')); })"/>

Keyboard Support

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

Additional Resources

Sample Applications

The sliderEntry component appears in the following ICEfaces sample applications:

  • ICEfaces Showcase (icefaces/samples/showcase)


The sliderEntry component appears in the following ICEfaces sample applications:

  • None.
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2017 ICEsoft Technologies Canada Corp.