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.
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:
This attribute specifies horizontal or vertical slider, "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
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.
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).
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:
To enable/disable ARIA at application level, the following param can be set in web.xml.
- 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.
Slider Story Board: