Slider"

From Documentation
Line 17: Line 17:
 
   <slider id="slider" orient="vertical"/>
 
   <slider id="slider" orient="vertical"/>
 
   <slider curpos="1" maxpos="20"  />
 
   <slider curpos="1" maxpos="20"  />
 +
</source>
 +
 +
= Minimal Position =
 +
  [Since 7.0.1]
 +
Slider now supports minimal position since, it can be changed by the minpos property as follows.
 +
<source lang="xml" >
 +
  <slider minpos="30"/>
 +
</source>
 +
And it also provides <tt>setRange(doubl, double)</tt> method to help user change the slider's range from minimal position to maximum position.
 +
 +
= Decimal Mode =
 +
  [Since 7.0.1]
 +
Set the mode property to "decimal" will enable decimal slider. So the slider can represent decimal number.
 +
<source lang="xml" >
 +
  <slider mode="decimal"/>
 
</source>
 
</source>
  
Line 25: Line 40:
 
<source lang="xml" >
 
<source lang="xml" >
 
   <slider pageIncrement="10"/>
 
   <slider pageIncrement="10"/>
 +
</source>
 +
 +
= Step =
 +
  [Since 7.0.1]
 +
By default, the slider will scroll to the position continuously when an user drags it. If you prefer to scroll a discrete fixed amount on each step, you can set the amount of value of the <tt>step</tt> property. For exmaple, the decimal slider's value could be rounded to a fixed number by specifying the step as follows.
 +
<source lang="xml" >
 +
  <slider minpos="10" maxpos="12" step="0.05" mode="decimal"/>
 
</source>
 
</source>
  
Line 39: Line 61:
 
| <center>onScrolling</center>
 
| <center>onScrolling</center>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.ScrollEvent</javadoc>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.ScrollEvent</javadoc>
Denotes that the user is scrolling a scrollable component. Notice that the component's content (at the server) won't be changed until onScroll is received. Thus, you have to invoke the <tt>getPos</tt> method in the ScrollEvent class to retrieve the temporary position.  
+
Denotes that the user is scrolling a scrollable component. Notice that the component's content (at the server) won't be changed until onScroll is received. Thus, you have to invoke the <tt>getPos</tt> method in the ScrollEvent class to retrieve the temporary position.
 
|}
 
|}
 
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
 
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
Line 85: Line 107:
 
| August 2010
 
| August 2010
 
| Slider support for clicking to increment or decrement
 
| Slider support for clicking to increment or decrement
 +
|-
 +
| 7.0.1
 +
| January 2014
 +
| [http://tracker.zkoss.org/browse/ZK-2085 Slider support minimal position and decimal mode]
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Revision as of 04:14, 7 January 2014

Slider

Employment/Purpose

A slider component represents a slider with a scale and a knob. It can be used to let user select a value by sliding the knob along the scale. A slider accepts a range of value starting from 0 to certain maximum value. The default maximum value of slider scale is 100. You could change the maximum allowed value by the maxpos property. However the default minimum is 0 and cannot be changed.

Example

ZKComRef Slider.png

  <slider id="slider" orient="vertical"/>
  <slider curpos="1" maxpos="20"  />

Minimal Position

 [Since 7.0.1]

Slider now supports minimal position since, it can be changed by the minpos property as follows.

  <slider minpos="30"/>

And it also provides setRange(doubl, double) method to help user change the slider's range from minimal position to maximum position.

Decimal Mode

 [Since 7.0.1]

Set the mode property to "decimal" will enable decimal slider. So the slider can represent decimal number.

  <slider mode="decimal"/>

Page Increment

By default, the slider will move to the position of the try on which an user clicks. If you prefer to move in a fixed amount (like the scrollbar does), you could specify the amount of value to move by use of Slider.setPageIncrement(int).

  <slider pageIncrement="10"/>

Step

 [Since 7.0.1]

By default, the slider will scroll to the position continuously when an user drags it. If you prefer to scroll a discrete fixed amount on each step, you can set the amount of value of the step property. For exmaple, the decimal slider's value could be rounded to a fixed number by specifying the step as follows.

  <slider minpos="10" maxpos="12" step="0.05" mode="decimal"/>

Supported Events

Name
Event Type
onScroll
Event: ScrollEvent

Denotes the content of a scrollable component has been scrolled by the user.

onScrolling
Event: ScrollEvent

Denotes that the user is scrolling a scrollable component. Notice that the component's content (at the server) won't be changed until onScroll is received. Thus, you have to invoke the getPos method in the ScrollEvent class to retrieve the temporary position.

Supported Molds

Available molds of a component are defined in lang.xml embedded in zul.jar.

Name
Snapshot
default
Slider mold default.png
sphere
Slider mold sphere.png
scale
Slider mold scale.png

Supported Children

*None

Use Cases

Version Description Example Location
     

Version History

Last Update : 2014/01/07


Version Date Content
5.0.4 August 2010 Slider.setPageIncrement(int) is supported.
5.0.4 August 2010 Slider support for clicking to increment or decrement
7.0.1 January 2014 Slider support minimal position and decimal mode



Last Update : 2014/01/07

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.