OverviewSince 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.
Getting StartedTo 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
Define the value of slider: <ace:sliderEntry value="60"/> //using managed bean <ace:sliderEntry value="#{bean.value}"/> Minimum value of slider: <ace:sliderEntry min="10"/>
Maximum value of slider: <ace:sliderEntry max="60"/>
Changing the axis: <ace:sliderEntry axis="y"/>
Defining the length of the slider: <ace:sliderEntry length="300px"/>
Event Listeners
<ace:sliderEntry valueChangeListener="#{bean.sliderChanged}"/>
Client Behavior Events
<ace:sliderEntry value="#{bean.value}" > <ace:ajax event="slide" execute="@this" render="sliderValueOutput" /> </ace:sliderEntry> JavaScript APIICEfaces 3.xThe 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);" ... />
Keyboard and ARIA Support
The following ARIA roles are supported: slider. CSS ClassesThe following markup represents the basic HTML structure of the component and the CSS classes it uses. <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 IssuesThe following known issues exist for the sliderEntry:
Additional ResourcesSample ApplicationsThe sliderEntry component appears in the following ICEfaces sample applications: ICEfaces Showcase
TutorialsThe sliderEntry component appears in the following ICEfaces tutorials: None |
SliderEntry
© Copyright 2021 ICEsoft Technologies Canada Corp.