Latest revision as of 06:59, 31 January 2024

Rangeslider

Demonstration:
Java API: Rangeslider
JavaScript API: Rangeslider

Available for ZK:

Since 9.0.0

Employment/Purpose

A rangeslider component represents a slider with a start and an end value. A rangeslider accepts a range of value starting from 0 to a certain maximum value. The default maximum value of rangeslider is 100. You can change the maximum allowed value by setting the max property. Notice that the value of max property is always larger than the value of min property.

Example

  <rangeslider startValue="10" endValue="90"/>

  <rangeslider orient="vertical" startValue="20" endValue="80" markScale="20" />

Properties

Disabled

Default: false

If the rangeslider is disabled, then users can not drag the slider buttons.

Orient

Default: horizontal

Sets it either "horizontal" or "vertical" to display rangslider.

Marks

Default: null

Sets the marks information map for displaying value marks. In this map, the key represents the number value of slider, and the value represents the displayed scale text.

MarkScale

Default: 20

Sets the marks information for displaying value marks.

By default, the value marks will be displayed every 20 starting from the minimum value. (if min is 0, then it displays "0 20 40 ...")

If the MarkScale is 0 and there is no Map information in Marks (see above), the marks will be empty.

Max

Default: 100

Rangeslider supports maximal position, which can be changed by the max property.

Min

Default: 0

Rangeslider supports minimal position, which can be changed by the min property.

StartValue, EndValue

Default: 0

Represent the range value of Rangeslider.

Step

Default: 1

By default, the rangeslider will scroll to the position continuously when a user drags it. If you prefer to scroll a discrete fixed amount at each step, you can set the amount of value using the step property.

TooltipVisible

Default: false

The tooltip displays the value of a slider button in the rangeslider. If the tooltipvisible is true, the tooltips of the slider buttons will always be visible.

Supported Events

Name	Event Type
onRangeValueChange	Event: RangeValueChangeEvent Denotes the range value of a component has been changed by the user.

Inherited Supported Events: XulElement

Supported Children

*None

Last Update : 2024/01/31

@@ Line 4: / Line 4: @@
 *Demonstration:
-*Java API: [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Rangeslider.html Rangeslider]
+*Java API: [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkex/zul/Rangeslider.html Rangeslider]
-*JavaScript API: [http://www.zkoss.org/javadoc/latest/jsdoc/zkmax/slider/Rangeslider.html Rangeslider]
+*JavaScript API: [http://www.zkoss.org/javadoc/latest/jsdoc/zkex/slider/Rangeslider.html Rangeslider]
-*{{ZK EE}}
+{{ZK PE}}
+{{versionSince| 9.0.0}}
 = Employment/Purpose =
-A rangeslider component represents a slider with a range value. It can be used to let user select a start value and end value. A rangeslider accepts a range of value starting from 0 to certain maximum value. The default maximum value of rangeslider scale is 100. You could change the maximum allowed value by the max property. Notice that the value of max property is always larger than the value of min property.
+A rangeslider component represents a slider with a start and an end value. A rangeslider accepts a range of value starting from 0 to a certain maximum value. The default maximum value of rangeslider is 100. You can change the maximum allowed value by setting the max property. Notice that the value of max property is always larger than the value of min property.
 = Example =
+[[Image:ZKComRef_Rangeslider.png]]
 <source lang="xml" >
-<zk xmlns:ca="client/attribute">
    <rangeslider startValue="10" endValue="90"/>
-</zk>
+  <rangeslider orient="vertical" startValue="20" endValue="80" markScale="20" />
 </source>
@@ Line 23: / Line 24: @@
 == Disabled ==
+{{defaultValue| false}}
 If the rangeslider is disabled, then users can not drag the slider buttons.
 == Orient ==
-Sets the orient either "horizontal" or "vertical" to display rangslider.
+{{defaultValue| horizontal}}
+Sets it either "horizontal" or "vertical" to display rangslider.
 == Marks ==
-Sets the marks information for displaying value marks.
+{{defaultValue| null}}
-(Default: "20")
-If there is only a number value, for example: 20.
+Sets the marks information map for displaying value marks.
-The value marks would be displayed every 20 start from the minimum value. (if min is 0, then display "0 20 40 ...")
+In this map, the key represents the number value of slider, and the value represents the displayed scale text.
-Another options for the marks can be specified as follows:
-<source lang="xml" ><rangeslider marks="10:10%, 20:20%, 50:50%, 80:80%" /></source>
+== MarkScale ==
-It means that each value mark could be displayed in different text.
+{{defaultValue| 20}}
+Sets the marks information for displaying value marks.
+By default, the value marks will be displayed every 20 starting from the minimum value. (if min is 0, then it displays "0 20 40 ...")
+If the MarkScale is 0 and there is no Map information in Marks (see above), the marks will be empty.
+[[Image:ZKComRef_RangesliderNoMarks.png]]
 == Max ==
-Rangeslider supports maximal position, which can be changed by the max property as follows.
+{{defaultValue| 100}}
-(Default: 100)
+Rangeslider supports maximal position, which can be changed by the max property.
 == Min ==
-Rangeslider supports minimal position, which can be changed by the min property as follows.
+{{defaultValue| 0}}
-(Default: 0)
+Rangeslider supports minimal position, which can be changed by the min property.
 == StartValue, EndValue ==
+{{defaultValue| 0}}
 Represent the range value of Rangeslider.
-(Default: 0)
 == Step ==
-By default, the rangeslider 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.
+{{defaultValue| 1}}
+By default, the rangeslider will scroll to the position continuously when a user drags it. If you prefer to scroll a discrete fixed amount at each step, you can set the amount of value using the step property.
 == TooltipVisible ==
-The tooltip displays the value of slider buttons in rangeslider.
+{{defaultValue| false}}
-If the tooltipvisible is true, the tooltips of the slider buttons would be always visible.
-(Default: false)
+The tooltip displays the value of a slider button in the rangeslider.
+If the tooltipvisible is true, the tooltips of the slider buttons will always be visible.
 =Supported Events=
-{| border="1" | width="100%"
+{| class='wikitable' | width="100%"
 ! <center>Name</center>
 ! <center>Event Type</center>
 |-
-| <center>onScroll</center>
+| <center>onRangeValueChange</center>
-| '''Event:''' <javadoc>org.zkoss.zk.ui.event.ScrollEvent</javadoc>
+| '''Event:''' <javadoc>org.zkoss.zkex.zul.event.RangeValueChangeEvent</javadoc>
-Denotes the content of a scrollable component has been scrolled by the user.
+Denotes the range value of a component has been changed by the user.
-|-
-| <center>onScrolling</center>
-| '''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.
 |}
 *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
 =Supported Children=
@@ Line 78: / Line 96: @@
   *None
-= Use Cases =
-{| border='1px' | width="100%"
-! Version !! Description !! Example Location
-|-
-| &nbsp;
-| &nbsp;
-| &nbsp;
-|}
-= Version History =
-{{LastUpdated}}
-{| border='1px' | width="100%"
-! Version !! Date !! Content
-|-
-| 9.0.0
-| November, 2019
-| [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Rangeslider.html Rangeslider] was introduced.
-|}
 {{ZKComponentReferencePageFooter}}

Anonymous

Rangeslider"

Namespaces

More

Page actions