SliderEntry

Overview

Since 2.0

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.

See the ICEfaces Showcase Live Demo of this component, complete with source code.

Getting Started

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

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

<ace:sliderEntry/>

By now page should look like this:

<html ... xmlns:ace="http://www.icefaces.org/icefaces/components">
<h:head></h:head>
<h:body>
  <h:form>
     <ace:sliderEntry />
  </h:form>
</h: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 100.

    <ace:sliderEntry max="60"/>

Changing the axis:

The axis attribute specifies the axis-orientation of the slider bar, "x" for horizontal, and "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"/>

showLabels Defines whether or not labels for the min and max values should be rendered at the ends of the rail.

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.

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

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

JavaScript API

ICEfaces 3.x

The client side slider object is exposed through the global variable name specified in the widgetVar attribute. You can use the getValue() and setValue() methods to read and change the value.

            <ace:sliderEntry widgetVar="sampleSlider" value="#{bean.value}" />
            <h:commandButton value="Show Value" onclick="alert('Value:' + sampleSlider.getValue());" ... />
            <h:commandButton value="Reset" onclick="sampleSlider.setValue(0);" ... />

ICEfaces 4+

The "widgetVar" attribute on the ACE components has been removed in ICEfaces 4 and in its place a new "ice.ace.instance()" client JavaScript object lookup API has been introduced. The reason for this change is to enable lazy-initialization of the ACE component JavaScript objects to improve runtime performance and reduce browser memory use. You can use the getValue() and setValue() methods as described above.

widget = ice.ace.instance('frm:mySlider');

To illustrate this change, see the before and after code example below.

Before (ICEfaces 3 API)

            <ace:sliderEntry widgetVar="sampleSlider" value="#{bean.value}" />
            <h:commandButton value="Show Value" onclick="alert('Value:' + sampleSlider.getValue());" ... />
            <h:commandButton value="Reset" onclick="sampleSlider.setValue(0);" ... />

After (ICEfaces 4 API)

    
            <ace:sliderEntry id="mySlider" value="#{bean.value}" />
            <h:commandButton value="Show Value" onclick="alert('Value:' + ice.ace.instance('frm:mySlider').getValue());" ... />
            <h:commandButton value="Reset" onclick="ice.ace.instance('frm:mySlider').setValue(0);" ... />

The ice.ace.instance function requires the full client id of the component to be specified, such as "j_idt77:componentId" instead of just "componentId". To reduce the complexity of working with complete IDs with this function it may be preferable in some cases to use prependId="false" in the enclosing form (e.g. <h:form prependId="false">).

<h:form id="myform">

h2. Keyboard and ARIA 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. |

The following ARIA roles are supported: slider.

h2. CSS Classes

The following markup represents the basic HTML structure of the component and the CSS classes it uses.

{code:xml}
<div class="[user defined classes]" style="[user defined styles]">
	<input />
	<div></div>
	<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
		<a class="ui-slider-handle ui-state-default ui-corner-all"></a>
	</div>
	<div></div>
</div>

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 and again in ICEfaces-3.3.0

Additional Resources

Sample Applications

The sliderEntry component appears in the following ICEfaces sample applications:

ICEfaces Showcase

Slider Demo
Located under /icefaces/samples/showcase.

Tutorials

The sliderEntry component appears in the following ICEfaces tutorials:

None