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.
To use the slider component, first the ace component name-space has to be added in your page.
Now you ready to use slider component, here is the basic example:
By now page should look like this:
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.
Minimum value of slider:
The min attribute specify value at the far left ot top of the rail. Default is 0.
Maximum value of slider:
The max attribute specify value at the far right or bottom of the rail. Default is 100.
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".
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".
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
|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.|
|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).|
|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 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.
The sliderEntry component appears in the following ICEfaces sample applications:
- Slider Demo
- Located under /icefaces/samples/showcase.
The sliderEntry component appears in the following ICEfaces tutorials: