Slider

You are viewing an old version (v. 29) 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 >>

Getting Started:

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

<html  xmlns:ann="http://www.icesoft.com/icefaces/component/annotated"
       ..>

 The second step is to apply yui-skin-name on the parent element of slider component.

<h:form styleClass="yui-skin-name">

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

<ann:slider />

 

 By now page should look like this:

<html  xmlns:ann="http://www.icesoft.com/icefaces/component/annotated"
       ..>
<body>
  <h:form styleClass="yui-skin-name">
     <ann:slider />
  <h:form>
<body>
<html>

YUI Attributes:

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

     <ann:slider value="60"/>

     //using managed bean
     <ann:slider value="#{bean.value}"/>

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

    <ann:slider min="10"/>

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

    <ann:slider max="60"/>

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

    <ann:slider axis="y"/>

 

  Defining the rail size of the slider:
  The railSize attribute defines the height of vertical Slider rail and width of horizontal slider rail. Default value is 150px.

    <ann:slider railSize="250px"/>

  Defining the thumb image:
  The thumbImage attribute takes the path to an image to use as the <img> for the thumb. Default is /skins/sam/thumb-classic-x.png

    <ann:slider thumbImage="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"

    <ann:slider 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.

   <ann:slider 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.

    <ann:slider valueChangeListener="#{bean.sliderChanged}"/>

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 ice:config tag handler can used:

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

  • 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.yui.slider.getInstance(clientId, callback);

 For example:

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

Slider Story Board:

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

© Copyright 2017 ICEsoft Technologies Canada Corp.