Rangeslider"

From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Rangeslider = *Demonstration: *Java API: [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Rangeslider.html Rangeslider] *JavaS...")
 
 
(31 intermediate revisions by 3 users not shown)
Line 4: Line 4:
  
 
*Demonstration:  
 
*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 =
 
= Employment/Purpose =
  
−
This component synchronizes the scrolling position on a page or within ZK containers (Div, Window, etc.) with hyperlinks and buttons. It allows you both to navigate to desired ZK components in a page and highlight the current navigation link based on the current scroll position.
+
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 =
 
= Example =
 +
[[Image:ZKComRef_Rangeslider.png]]
 +
<source lang="xml" >
 +
  <rangeslider startValue="10" endValue="90"/>
  
−
<source lang="xml" >
+
   <rangeslider orient="vertical" startValue="20" endValue="80" markScale="20" />
−
<zk xmlns:ca="client/attribute">
 
−
   <anchornav name="a1" width="250px">
 
−
        <listbox>
 
−
            <listitem><listcell><a ca:data-anchornav-target="$win1"> First Window </a></listcell></listitem>
 
−
            <listitem><listcell><a ca:data-anchornav-target="$win2"> Second Window </a></listcell></listitem>
 
−
            <listitem><listcell><a ca:data-anchornav-target="$win3"> Third Window </a></listcell></listitem>
 
−
        </listbox>
 
−
    </anchornav>
 
−
  <window id="win1" title="1. First Window">
 
−
    Hello world.
 
−
  </window>
 
−
  <window id="win2" title="2. Second Window">
 
−
    Welcome to ZK world.
 
−
  </window>
 
−
</zk>
 
 
</source>
 
</source>
  
−
By default, the Anchornav component will watch the scroll position of a page.
+
= Properties =
−
Other scrollable containers can be associated with a named Anchornav by setting the client-attribute: ca:data-anchornav-scroll.
+
 
 +
== Disabled ==
 +
{{defaultValue| false}}
 +
 
 +
If the rangeslider is disabled, then users can not drag the slider buttons.
 +
 
 +
== Orient ==
 +
{{defaultValue| horizontal}}
 +
 
 +
Sets it either "horizontal" or "vertical" to display rangslider.
 +
 
 +
== Marks ==
 +
{{defaultValue| 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 ==
 +
{{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 ==
 +
{{defaultValue| 100}}
 +
 
 +
Rangeslider supports maximal position, which can be changed by the max property.
 +
 
  
−
For example:
+
== Min ==
−
<source lang="xml" >
+
{{defaultValue| 0}}
−
<div ca:data-anchornav-scroll="a1">
 
−
    <!-- other components -->
 
−
</div>
 
−
</source>
 
  
−
A or Button components can be used as links and targets are specified by the ZK client-attribute ca:data-anchornav-target=[selector].
+
Rangeslider supports minimal position, which can be changed by the min property.
−
For example, in Line 3 and Line 4, $win1 / $win2 select widgets by zk component id, win1 / win2.
 
  
−
The JQuery-based selector syntax (#domId / .class / elementName) is extended by ZK specific selectors as seen above using $componentId or @componentName.
 
  
−
= Properties =
+
== StartValue, EndValue ==
 +
{{defaultValue| 0}}
  
−
== Name ==
+
Represent the range value of Rangeslider.
−
Set the name of Anchornav, it is only required when we want to spy scrolling in ZK containers instead of the whole page scrollbar.
 
  
−
== PositionFixed ==
 
−
Set whether to enable position fixed when anchornav is out of current view. When it is set to true, Anchornav will stay (float) on the same position of the page. (Default: true)
 
  
−
= Supported Events =
+
== Step ==
 +
{{defaultValue| 1}}
  
−
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/LabelImageElement#Supported_Events | LabelImageElement]]
+
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.
  
−
= Supported Children =
+
== TooltipVisible ==
 +
{{defaultValue| false}}
  
−
*[[ZK_Component_Reference/Essential_Components/Nav | Nav]], [[ZK_Component_Reference/Essential_Components/Nav/Navitem  | Navitem]],[[ZK_Component_Reference/Essential_Components/Nav/Navseparator  | Navseparator]]
+
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.
  
−
= Use Cases =
+
=Supported Events=
  
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
−
! Version !! Description !! Example Location
+
! <center>Name</center>
 +
! <center>Event Type</center>
 
|-
 
|-
−
| &nbsp;
+
| <center>onRangeValueChange</center>
−
| &nbsp;
+
| '''Event:''' <javadoc>org.zkoss.zkex.zul.event.RangeValueChangeEvent</javadoc>
−
| &nbsp;
+
Denotes the range value of a component has been changed by the user.
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
 +
 +
=Supported Children=
  
−
= Version History =
+
*None
  
−
{{LastUpdated}}
 
−
{| border='1px' | width="100%"
 
−
! Version !! Date !! Content
 
−
|-
 
−
| 9.0.0
 
−
| November, 2019
 
−
| [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Anchornav.html Anchornav] was introduced.
 
−
|}
 
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 06:59, 31 January 2024


DocumentationZK Component ReferenceInputRangeslider
Rangeslider

Rangeslider

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion pe-ee.png

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

ZKComRef Rangeslider.png 

  <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.

ZKComRef RangesliderNoMarks.png

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.

Supported Children

*None



Last Update : 2024/01/31

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Input/Rangeslider&oldid=56671"