Latest revision as of 07:02, 31 January 2024

Multislider

Demonstration:
Java API: Multislider
JavaScript API: Multislider

Available for ZK:

Since 9.0.0

Employment/Purpose

A multislider component represents a slider with multiple ranges. It includes sliderbuttons, which can be used to let user select a start value and an end value. A multislider accepts a range of values starting from 0 to a maximum value you defined. The default maximum value is 100. You can change the maximum value by setting the max property. Notice that the value of max property is always larger than the value of min property.

Example

  <multislider>
    <sliderbuttons startValue="10" endValue="70"/>
    <sliderbuttons startValue="20" endValue="50"/>
    <sliderbuttons startValue="30" endValue="40"/>
  </multislider>
  <multislider min="5" max="120" orient="vertical">
    <sliderbuttons startValue="5" endValue="100"/>
    <sliderbuttons startValue="20" endValue="50"/>
  </multislider>

Properties

Disabled

Default: false

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

Orient

Default: horizontal

Sets the orientation to either "horizontal" or "vertical" to display the multislider.

Marks

Default: null

Sets the marks information for displaying value marks.

It supports Map<Integer, String>. The key is represented as the value of multislider, and the value is represented as the displayed mark label. It means that each value mark could be displayed in different text.

MarkScale

Default: 20

Sets the marks information for displaying value marks.

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

Max

Default: 100

Defines the max value of the multislider. It can be changed by the max property.

Min

Default: 0

Defines the minimal value of the multislider. It can be changed by the min property.

Step

Default: 1

By default, the multislider 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 Step property.

TooltipVisible

Default: false

The tooltip displays the value of slider buttons in the multislider. If tooltipvisible is true, the tooltips of the slider buttons will always be displayed.

Supported Events

Inherited Supported Events: Rangeslider

Supported Children

* Sliderbuttons

Last Update : 2024/01/31

@@ Line 6: / Line 6: @@
 *JavaScript API: [http://www.zkoss.org/javadoc/latest/jsdoc/zkmax/slider/Multislider.html Multislider]
 {{ZK EE}}
- since 9.0.0
+{{versionSince| 9.0.0}}
 = Employment/Purpose =
-A multislider component represents a slider with a few range values. It includes sliderbuttons, which can be used to let user select a start value and an end value. A multislider accepts a range of value starting from 0 to certain maximum value. The default maximum value of multislider scale 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.
+A multislider component represents a slider with multiple ranges. It includes sliderbuttons, which can be used to let user select a start value and an end value. A multislider accepts a range of values starting from 0 to a maximum value you defined. The default maximum value is 100. You can change the maximum value by setting the max property. Notice that the value of max property is always larger than the value of min property.
 = Example =
@@ Line 15: / Line 15: @@
 <source lang="xml" >
-<zk xmlns:ca="client/attribute">
    <multislider>
-        <sliderbuttons startValue="10" endValue="70"/>
+    <sliderbuttons startValue="10" endValue="70"/>
-        <sliderbuttons startValue="20" endValue="50"/>
+    <sliderbuttons startValue="20" endValue="50"/>
-        <sliderbuttons startValue="30" endValue="40"/>
+    <sliderbuttons startValue="30" endValue="40"/>
-     </multislider>
+  </multislider>
-</zk>
+  <multislider min="5" max="120" orient="vertical">
+    <sliderbuttons startValue="5" endValue="100"/>
+     <sliderbuttons startValue="20" endValue="50"/>
+  </multislider>
 </source>
@@ Line 27: / Line 29: @@
 == Disabled ==
-If the multislider is disabled, then users can not drag the slider buttons.
+{{DefaultValue| false}}
+If the multislider is disabled, users can not drag the slider buttons.
 == Orient ==
-Sets the orient either "horizontal" or "vertical" to display multislider.
+{{DefaultValue| horizontal}}
+Sets the orientation to either "horizontal" or "vertical" to display the multislider.
 == Marks ==
-Sets the marks information for displaying labels.
+{{DefaultValue| null}}
-(Default: "20")
-If there is only one value, for example, 20, the value marks will be displayed at the multiples of 20 starting from the minimum value. (if min is 0, then it displays "0 20 40 ...")
+Sets the marks information for displaying value marks.
-Another option is to specify the marks as follows:
-<source lang="xml" ><multislider marks="10:10%, 20:20%, 50:50%, 80:80%" /></source>
+It supports Map<Integer, String>. The key is represented as the value of multislider, and the value is represented as the displayed mark label.
-With this approach you can assign different values to different marks.
+It means that each value mark could be displayed in different text.
+== MarkScale ==
+{{DefaultValue| 20}}
+Sets the marks information for displaying value marks.
+By default, the value marks are displayed every 20 starting from the minimum value. (if min is 0, then it displays "0 20 40 60 ...")
 == Max ==
-Multislider supports maximal position, which can be changed by the max property as follows.
+{{DefaultValue| 100}}
-(Default: 100)
+Defines the max value of the multislider. It can be changed by the max property.
 == Min ==
-Multislider supports minimal position, which can be changed by the min property as follows.
+{{DefaultValue| 0}}
-(Default: 0)
+Defines the minimal value of the multislider. It can be changed by the min property.
 == Step ==
-By default, the multislider will scroll to the position continuously when a 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 multislider 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 Step property.
 == TooltipVisible ==
-The tooltip displays the value of slider buttons in multislider.
+{{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 slider buttons in the multislider.
+If tooltipvisible is true, the tooltips of the slider buttons will always be displayed.
 =Supported Events=
-*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
+*Inherited Supported Events: [[ZK_Component_Reference/Input/Rangeslider#Supported_Events | Rangeslider]]
 =Supported Children=
@@ Line 63: / Line 81: @@
   *[[ZK_Component_Reference/Input/Sliderbuttons | Sliderbuttons]]
-= 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/Multislider.html Multislider] was introduced.
-|}
 {{ZKComponentReferencePageFooter}}

Anonymous

Multislider"

Namespaces

More

Page actions